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 _Vue

export function install(Vue) {
    // 判断安装过了就不再重复安装
    if (install.installed && _Vue === Vue) return
    install.installed = true

    _Vue = Vue

    const isDef = v => v !== undefined

    // 注册实例
    const registerInstance = (vm, callVal) => {
        let i = vm.$options._parentVnode
        if (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 = this
                this._router = this.$options.router
                this._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 hooks
    strats.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组件

六、完整代码示例

 

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 = false

new 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>

效果：