本文共 4150 字，大约阅读时间需要 13 分钟。

安装

方式一：

直接下载 / CDN Unpkg.com 提供了基于 NPM 的 CDN 链接。上面的链接会一直指向在 NPM 发布的最新版本。你也可以像这样指定 版本号 或者 Tag。 在 Vue 后面加载 vue-router，它会自动安装的：

方式二：

使用npm安装

npm install vue-router

重要配置

1. 在自己的工程的src路径下新建一个router文件夹，接着在该文件夹下新建一个index.js
   
   index.js

import Vue from "vue";//1. 导入vue-router包import VueRouter from "vue-router";import BusinessGrouping from "../components/umeapi/BusinessGrouping"import ProjectsOfBusinessGrouping from "../components/umeapi/ProjectsOfBusinessGrouping"import DetailsOfAPI from "../components/umeapi/DetailsOfAPI"//2. 手动安装VueRouterVue.use(VueRouter);const routes = [    {        path: '/',        redirect: '/groups',        component: BusinessGrouping    },    {        path: "/groups",        component: BusinessGrouping    },    {        path: "/groups/:groupName",        // route level code-splitting        // this generates a separate chunk (about.[hash].js) for this route        // which is lazy-loaded when the route is visited.        component: ProjectsOfBusinessGrouping,        // children代表嵌套路由        children: [            {                path: 'projects/:projectName',                component: DetailsOfAPI            },        ]    }];const router = new VueRouter({//选择路由的模式，默认是hash模式    mode: 'history',    routes});export default router;

知识一：路由使用标签

   
   
   '
   
   
   

例子：<router-link to="/foo">Go to Foo</router-link>

知识二：动态路由匹配

使用场景举例

我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染 注：在路径配置的index.js文件中，所需使用的组件要提前导入进来（import）

routes: [    // 动态路径参数 以冒号开头    { path: '/user/:id', component: User }  ]

知识三：嵌套路由

使用场景举例

父组件中包含子组件，在子组件中又包含一个子子组件。。。

以下是自己项目中涉及路由嵌套的部分，结合前面的index.js文件，即可理解路由嵌套的使用场景和使用规则；核心是在配置中增加children属性

父组件：BusinessGrouping.vue

子组件：ProjectsOfBusinessGrouping.vue

子子组件：DetailsOfAPI.vue

知识四：导航守卫（前面代码中涉及具体使用）

使用场景

个人理解是当路由发生变化时需要使用导航守卫的方法（简单粗暴～～）

根据作用范围不同可分为：

• 全局的（未使用过）
• 单个路由独享的（未使用过）
• 组件级的（使用过）

组件内的守卫

1. beforeRouteEnter（to, from, next）
   介绍：
   （1）在渲染该组件的对应路由被 confirm 前调用
   （2）不！能！获取组件实例 this因为当守卫执行前，组件实例还没被创建
   （3）使用该守卫时需要注意它的放置位置，当你有父组件和子组件时，且在父组件中点击链接打算跳转到子组件中，此时的beforeRouteEnter方法应该放在子组件中。
   （4）使用next（）可实现真正跳转到该组件前需要做的事情
2. beforeRouteUpdate
   介绍
   （1）在当前路由改变，但是该组件被复用时调用。举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
   （2）可以访问组件实例 this
   （3）与watch作用类似，但是beforeRouteUpdate可以在next（）里执行一些操作
3. beforeRouteLeave
   介绍
   （1）导航离开该组件的对应路由时调用，与beforeRouteEnter作用相反
   （2）可以访问组件实例 this

知识五：watch的使用

使用场景

复用组件时，想对路由参数的变化作出响应的话，你可以简单地 watch (监测变化) $route 对象

注：当路由参数变化情况如从/use/123导航到/user/456时，原来的组件实例会被复用（即渲染了同一个组件）。这种情况下，意味着组件的生命周期钩子不会被再次调用

使用介绍

方法一：

export default {  data () {    return {      loading: false,      post: null,      error: null    }  },  created () {    // 组件创建完后获取数据，    // 此时 data 已经被 observed 了    this.fetchData()  },  watch: {    // 如果路由有变化，会再次执行该方法    '$route': 'fetchData'  },  methods: {    fetchData () {      this.error = this.post = null      this.loading = true    }  }}

方法二：

watch: {        // 如果路由有变化，会再次执行该方法            '$route' (to, from){                console.log("projects from, to", from, to)                if(from.params.projectName && !Object.prototype.hasOwnProperty.call(to.params, 'projectName')){                    console.log("从详情页回来点击面包屑回来的")                    this.getAllProjectsOfGroup(to.params.groupName);                }            }        },

转载地址：http://cqtii.baihongyu.com/