Vue(四)——vue-router_综合

路由

当应用变得复杂以后，我们就需要通过一种便捷、高效的方式来管理应用，最常见的就是通过路由

路由：把 url 与应用中的对应的组件进行关联，通过不同的 url 访问不同的组件

一、vue-router的安装

通过vue create 项目名命令创建项目时也可以选择自动构建vue router。

npm高版本，使用npm i vue-router会自动加上--Save，自动添加到package.json的dependencies下，如果要加到devDependencied的话需要收加-D，npm i -D vue-router

npm i vue-router
// OR
yarn add vue-router

vue-router下install.js路由文件分析：

import View from './components/view'
import Link from './components/link'export let _Vueexport function install(Vue) {// 判断安装过了就不再重复安装if (install.installed && _Vue === Vue) returninstall.installed = true_Vue = Vueconst isDef = v => v !== undefined// 注册实例const registerInstance = (vm, callVal) => {let i = vm.$options._parentVnodeif (isDef(i) && isDef(i = i.data) && isDef(i = i.registerRouteInstance)) {i(vm, callVal)}}Vue.mixin({// 给当前实例对象添加router属性（router相当于我们自己引入时的router,将其挂载到实例中，后续就可以通过router进行访问）beforeCreate() {if (isDef(this.$options.router)) {this._routerRoot = thisthis._router = this.$options.routerthis._router.init(this)Vue.util.defineReactive(this, '_route', this._router.history.current)} else {this._routerRoot = (this.$parent && this.$parent._routerRoot) || this}registerInstance(this, this)},destroyed() {registerInstance(this)}})// 定义$router，之后我们可以 通过this访问路由（this.$router）Object.defineProperty(Vue.prototype, '$router', {get() { return this._routerRoot._router }})Object.defineProperty(Vue.prototype, '$route', {get() { return this._routerRoot._route }})// 用于挂载数据的路由Vue.component('RouterView', View)// 类似于a标签的路由Vue.component('RouterLink', Link)const strats = Vue.config.optionMergeStrategies// use the same hook merging strategy for route hooksstrats.beforeRouteEnter = strats.beforeRouteLeave = strats.beforeRouteUpdate = strats.created
}

二、Vue.use()

通过前面提到的 Vue.use 方法，把 vue-router 安装到指定的 Vue 实例中

import Vue from 'vue'
import Router from 'vue-router'Vue.use(Router);

三、创建路由对象

通过 vue-router 提供的 Router 构造函数（类）创建路由对象，路由对象包含了当前使用的模式（hash、history）、路由信息（url 与组件的对应关系）等信息

import Router from 'vue-router';
import Home from './views/Home.vue';
import Home from './views/About.vue';const myRouter = new Router({mode: 'history',routes: [{path: '/',component: Home},{path: '/about',component: About}]
});...,new Vue({...,router: myRouter
});

四、router-view组件

配置了路由信息以后，我们还需要中页面（组件）中指定路由对应的组件出现的位置，当当前访问的 url 与某个路由信息匹配的时候，该组件就会出现在 router-view 组件所在的位置

因为router-view 是由vue-router注册成全局组件，所以不需要再到new vue()中再引入

// App.vue
<template><div id="app"><div id="nav"><router-link to="/">Home</router-link> |<router-link to="/about">About</router-link></div><hr><router-view/></div>
</template>

五、编写自定义的Home和About组件

六、完整代码示例

Vue(四)——vue-router

router.js:

import Vue from 'vue'
import Router from 'vue-router'// @自动定位到src目录
import Home from '@/components/Home.vue';
import About from '@/components/About.vue';// 注意Vue.use()的值为Router不是创建后的myRouter
Vue.use(Router);const myRouter = new Router({// 路由模式history,hash,abstract等mode: 'history',routes: [{path: '/',component: Home},{path: '/about',component: About}]
});export default myRouter;

main.js:

import Vue from 'vue'
import App from './App.vue'
// 引入自定义router，注意这里router.js是在main.js的同级目录
import myRouter from './router'Vue.config.productionTip = falsenew Vue({render: h => h(App),router: myRouter
}).$mount('#app')

About.vue:

<template><div>About</div>
</template>

Home.vue:

<template><div>Home</div>
</template>

App.vue:

<template><div id="app"><h1>Vue-router</h1><div id="nav"><!-- 自动适用history和hash模式:如果是使用history自动加/,如果使用hash自动加# --><router-link to="/">Home</router-link> |<router-link to="/about">About</router-link></div><hr/><router-view/></div>
</template><script>export default {name: 'App',
}
</script><style>
</style>

效果：

Vue(四)——vue-router