vue路由配置解析

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值进行设置。

<router-link to="/films/nowplaying" custom  v-slot="{ navigate,isActive }">
    <li @click="navigate" >
        <span :class="isActive?'kerwinactive':''">正在热映</span>
    </li>
</router-link>

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

写法二（旧版）：

<router-link to="/cinemas" active-class="kerwinactive" tag="li">cinemas</router-link>

编程式跳转
编程式跳转一般用于在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') // 单文件
  }