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

vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。路由模块的本质就是建立起url和页面之间的映射关系。

一个简单的完整路由

import Vue from 'vue'import Film from '../views/Film.vue'// 1. 导入官方提供的路由插件import VueRouter from 'vue-router' // 2. 注册路由插件Vue.use(VueRouter)// 3. 配置路由信息const routes = [  {
       path: '/films',    component: Film, // 单文件  }]// 4. 初始化路由插件并导出const router = new VueRouter({
     mode: 'hash',  routes})export default router

路由配置里的点点滴滴

路由根据实际应用场景的不同，在配置这块也会有很大的差别。

路由重定向通常用来过滤某些路由请求，例如某个路由下

1. 一级路由

{
    path: '/center',  component: Center // 单文件}

2. 二级路由

二级路由根据写法不同，可分为并列关系和嵌套关系（嵌套路由）

嵌套路由通常用来做选项卡的切换。类似于下图

{
     path: '/films',  component: Film, // 单文件  children: [    {
         path: '/films/nowplaying',      component: Nowplaying // 单文件    },    {
         path: '/films/comingsoon',      component: Comingsoon // 单文件    }  ]}

3. 路由重定向

路由重定向通常用来过滤路由，使用redirect关键字配置。

以下面代码为例，当页面输入/films/123，在films的二级目录下找不到/films/123该路由，但是一级路由是/films。那么就会找到路由3，这个时候路由重定向，路由会跳转到/films/nowplaying。也就是说/films/123 - > /films/nowplaying

{
     path: '/films',  component: Film, // 单文件  children: [    {
         path: '/films/nowplaying', //路由1      component: Nowplaying // 单文件    },    {
         path: '/films/comingsoon',  //路由2      component: Comingsoon // 单文件    },    {
           path: '/films',  //路由3        redirect: '/films/nowplaying'      }      ]}

4. 动态路由

动态路由通常用来路由跳转的过程中传递参数，例如点击列表页某条数据，跳转到详细页。

定义动态路由：

{
     path: '/detail/:myid',  component: Detail // 单文件}

跳转到指定动态路由：

// 1- 跳转路径  携带参数this.$router.push(`/detail/${
     id}`)

5. 命名路由

命名路由是用一个名称来标识一个路由，当路由的另一种path方式有时候会名字很长的时候，用命名路由就显得很简单了。跳转路由的时候根据路由的名字name进行跳转

{
     name: 'kerwindetail',  path: '/detail/:myid',  component: Detail // 单文件}

// 2- 名字跳转this.$router.push({
     name: 'kerwindetail',  params: {
       myid: id  }})

路由跳转的几种方式

声明式跳转

声明式跳转一般用于html中，使用router-link组件。这里有两种写法 写法一（最新）：

1. to属性里配置跳转的路由地址
2. custom表示支持自定义模板
3. v-slot属性里配置固定值"{ navigate,isActive }"，navigate表示单击绑定的事件function，由vue提供，我们不需了解；isActive 表示是否访问跳转后的路由，默认返回true，这个也是有vue提供，不用过多了解。
4. router-link标签里的为插槽内容（自定义模板的具体html结构），即router-link组件最终渲染后的html结构。需要注意，绑定事件为固定"navigate"，高亮显示通过isActive值进行设置。

       
    
        正在热映    
   

总结一下：

vue提供：router-link， to，custom，v-solt，navigate，isActive。 我们提供：跳转的路由地址，自定义html结构，高亮显示效果

写法二（旧版）：

   
    cinemas
   

编程式跳转

编程式跳转一般用于在js中，使用this.$router.push()方法来进行

this.$router.push(`/detail/${
     id}`)

路由拦截

我们主要是利用vue-router提供的钩子函数beforeEach()对路由进行判断，从而达到路由拦截的效果。

to: Route: 即将要进入的目标路由对象 from: Route: 当前导航正要离开的路由 next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。 next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed （确认的）。 确保要调用 next 方法，否则钩子就不会被 resolved

// 全局，在router/index.js里定义router.beforeEach((to, from, next) => {
     console.log(to.fullPath)  const persmisson = ['/order', '/money', '/card', '/center'] // 授权路径  if (persmisson.includes(to.fullPath)) {
       // console.log('拦截')    // 登录成功过后， 后端返回加密后的token ，前端可以判断加密token是否有效，    if (localStorage.getItem('token')) {
         next('/login') // 跳转到login 页面    } else {
         next()    }  } else {
       next()  }})

局部拦截

export default {
     // 路由的钩子函数  当进入组件之前，执行 beforRouteEnter 路由钩子函数。也就是说先执行beforRouteEnter，再执行beforeCreate  beforeRouteEnter (to, from, next) {
       // console.log('beforeRouterEnter')    if (localStorage.getItem('token')) {
         next()    } else {
         next('/login') // 跳转到login 页面    }  },  beforeRouteLeave(to,from,next){
   //离开组件的时候触发	   //什么都不写的时候，不会离开(走下一步)	    next()	}}

路由懒加载

等路径匹配后，再加载当前页面对应的js文件。主要用于解决首屏加载过慢问题。

{
       path: '/cinemas',    component: () => import('../views/Cinema.vue') // 单文件  }

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