我的 Vue.js 学习日记 （十三） - vue-router

上节回顾

一个月的期限马上要到了，真是弹指一瞬间的匆匆...
上节主要记录了我从子组件修改父组件传递过来的prop值得一个思路过程
由于近期对于权限控制方面有一定的需求，所以去了解了一下vuex与vue-router，那么今天就来总结一下关于vue-router的一些已有的认识，并且有时间的话进行一下系统的学习

本节目标

总结vue-router基于vue-cli项目的安装及简单使用

1.安装

npm install vue-router

2.目录

通常来说路由都存放在一个单独的.js文件，路径如下：

src - router - index.js

我的index.js现有代码如下：

import Vue from 'vue'
import Router from 'vue-router'
import Frame from '@/components/frame'
import StudentList from '@/components/student/student-list'
import StudentAdd from '@/components/student/student-add'
import DemoSlot from '@/components/demo/demo-slot'
import DemoPage from '@/components/demo/demo-page'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      component: Frame,
      children: [
        {
          path: '/student/list',
          component: StudentList
        },
        {
          path: '/student/add',
          component: StudentAdd
        },
        {
          path: '/demo/slot',
          component: DemoSlot
        },
        {
          path: '/demo/page',
          component: DemoPage
        }
      ]
    }
  ]
})

3.引入

路由创建好了，那么接着就应该将整理好的路由与项目关联起来啦

只有两个操作点：

1. import进来
2. 挂在vue实例上

我们打开src - main.js

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App'
import router from './router'

Vue.use(ElementUI)
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

4.使用

现在，凡是在路由组件中配置过的路由记录，现在都可以被导航啦

注：没有配置过的路由记录是不可以被导航的

4-1.路由基础用法：

1.<router-link to="/student/list" tag="div">学员列表</router-link>

意思是通过路由导航到/student/list记录点，to设置目标路由记录点，tag="div"表示router-link最终会呈现为一个div元素

通过向根实例传入router实例，router会注入到每个组件中，可以通过：this.$router在各个组件当中获取router的实例

2.

例如：

this.$router.push()进行编程式导航

this.$router.go()前进后退等

5.hash与history

简单来理解的话：

hash：url中带有#，并且只修改#之后的url，默认情况下vue-router是hash模式

history：url中不带#，使用history.pushState完成跳转并且需要后台配合使用，使用history模式需要显式指定

不过两者的跳转都不会使页面重新加载

6.守卫

6.1.种类

守卫总共分为：全局守卫、路由守卫、组件守卫三种

意思就是分三个区域，全局区域，路由区域，组件区域，很明显是作用域不同

全局守卫分3个：前置beforeEach、后置afterEach、解析beforeResolve

路由独享守卫：进入前beforeEnter

组件守卫：进入（组件对应）路由前beforeRouteEnter、路由改变前（组件复用时）beforeRouteUpdate 、离开（组件对应）路由前beforeRouteLeave

守卫执行顺序：导航解析流程

附一张我自己的理解：

注：带有next的守卫一定要调用next()

6.2.应用场景

前些天在做权限时通过查找资料，最终发现通过全局前置守卫，可以实现一些权限控制的功能，当然他并不能独立完成需要配合vuex来使用

7.meta 路由元数据

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      children: [
        {
          path: 'bar',
          component: Bar,
          // a meta field
          meta: { requiresAuth: true }
        }
      ]
    }
  ]
})

注：meta很有用的，例如我们可以通过为路由记录添加meta信息来代表该路由所代表的功能模块代码，在addRoutes时判断是否有权限加载此路由记录

8.路由懒加载

由于我们使用的是SPA的方式开发网页，那么有一个庞大的js文件是可想而知的

路由懒加载即是为了降低不必要的开销，在路由被访问时才真正的去加载它

用法：

const Foo = () => import('./Foo.vue')

只修改了引入方式，使用方式并没有改变

const router = new VueRouter({
  routes: [
    { path: '/foo', component: Foo }
  ]
})

9.addRoutes 动态添加路由

用法：

假设我们有如下路由：

var router = new Router({
  routes: [
    {
      path: '/',
      component: Frame,
      ]
    }
  ]
})

并且有如下数组：

var routes = [{
      path: '/index',
      name: '首页',
      component: 组件,
      children: [{
        path: 'page1',
        component: 组件1
      }, {
        path: 'page2',
        component: 组件2
      }]

那么可以：

router.addRoutes(routes)

之后就可以成功的导航到新增的三个路由记录啦