Vue核心插件 —— Vue Router

Vue-router之集成

在项目目录新建config文件夹，新建router.js文件（Vue Router入口文件）和routes.js文件（路由配置文件），推荐项目结构

安装Vue Router插件

npm install vue-router -S

在 routes.js文件 中配置路由，以下为路由配置基础示例

import Login from '../views/login/login.vue'

export default [
  {
    path: '/login',
    component: Login
  }
]

 在router.js文件 中编写入口文件代码，示例如下

推荐使用实例1的方式返回Vue Router实例，在服务端渲染的过程中，每次必须生成一个新的Vue Router，使用同一个Vue Router会导致内存溢出。客户端渲染倒是可以用同一个Vue Router，但还是推荐统一用实例1的方式返回Vue Router实例

// 引用vue-router插件
import Router from 'vue-router'
// 使用基础路由配置
import routes from './routes'

// 返回Vue Router实例1
export default () => {
  return new Router({
    routes
  })
}

// 返回Vue Router实例2
// const router = new Router({
//   routes
// })
// export default router

 定义好Vue Router的入口文件之后，接下来，要在项目的入口文件（index.js）中使用

import Vue from 'vue'
import App from './app.vue'
import VueRouter from 'vue-router'
import createRouter from './config/router'

Vue.use(VueRouter)

const router = createRouter()

new Vue({
  router,
  render: (h) => h(App)
}).$mount(root)

Vue-router之配置

详解Vue Router的入口文件router.js的配置

import Router from 'vue-router'
import routes from './routes'

export default () => {
  return new Router({
    routes,
    // 链接可以加前缀
    base: '/base/',
    // 链接访问方式，vue默认为hash模式，可设置为history模式
    mode: 'history',
    // 页面中使用<router-link to="/login">/login</router-link>设置导航
    // 当前激活状态页面的对应跳转链接会有router-link-exact-active，router-link-active两个样式，可以自定义样式名称
    linkActiveClass: 'a',
    linkExactActiveClass: 'b',
    // 页面路径跳转时，是否进行滚动行为，并且可指定滚动到什么位置
    scrollBehavior (to, from, savedPosition) {
      if (savedPosition) {
        return savedPosition
      } else {
        return {x: 0, y: 0}
      }
    }
    // 不是所有浏览器都支持前端路由方式（history模式），设置成true，vue会自动转换成hash转换方式
    // 若设置成false，单页应用就变成了多页应用，每次页面跳转都会请求后端返回新的内容，比较耗时
    fallback: true
    // vue默认已处理了链接上的参数，以下方法可自定义转换方式
    parseQuery (query) {
      // 将字符串转成obj
    },
    stringifyQuery (obj) {
      // 将obj转成字符串
    }
  })
}

Vue-router之路由参数传递

动态路由、路由传参、懒加载、命名视图、路由命名、路由元信息、子路由、路由钩子

{
    // 动态路由其实又可以叫做路由传参
    path: '/login/:id',
    //  推荐用法props: true，实现组件中不需要写this.$route.id，.vue文件中写了$route相当于耦合，避免之后vue-router升级之后写法不一样
    // 如果组件中使用了$route，则不能当成一个单独的组建使用，因为会去路由上找id值，使用了props接受参数，其他组件只要通过prop传递
    // 尽量使vue和$route解耦，让组件复用性更高
    props: true,
    // props: {id: '111'},
    // props: (route) => ({id: route.query.id}),
    component: Login,
    // 懒加载，页面进入时再去加载组件，避免一开始加载所有组件（非当前组件）的js
    // component: () => import('../views/todo/todo.vue'), // 异步路由配置，首屏加载速度更快
    // 命名视图
    // 有时候想同时（同级）展示多个视图，例如创建一个布局，有 sidebar（侧导航） 和 main（主内容） 两个视图，这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果 router-view 没有设置名字，那么默认为 default。
    // <router-view class="view one"></router-view>
    // <router-view class="view two" name="sidebar"></router-view>
    // <router-view class="view three" name="header"></router-view>
    // components: {
    //   default: Login,
    //   a: Sidebar,
    //   b: Header
    // },
    // 路由命名。可通过路由名称进行路由跳转<router-link :to="{name: 'app'}">/app</router-link>
    name: 'app',
    // 路由元信息，保存路由中的信息 在写HTML页面时，可以在head标签中定义meta，mate即页面源信息，这些信息有利于seo处理。而在vue组件中很难写这东西
    meta: {
      title: 'this is app',
      description: 'description'
    },
    // 子路由
    children: []
    // 路由钩子
    // beforeEnter (to, from, next) {
    //   console.log('app route before enter')
    //   next()
    // }
  }

在使用懒加载时，需要安装对应插件 

npm i babel-plugin-syntax-dynamic-import -D

安装完成，修改.babelsrc 

Vue-router之导航守卫

vue-router中的导航钩子按定义位置不同(执行时机也不同)分为全局钩子、路由级钩子和组件级钩子。

在项目入口文件（index.js）中的路由守卫，全局钩子

import Vue from 'vue'
import App from './app.vue'
import VueRouter from 'vue-router'
import createRouter from './config/router'

Vue.use(VueRouter)

const router = createRouter()

// 全局路由钩子
router.beforeEach((to, from, next) => {
  // 路由跳转前可做数据校验，例如判断是否登陆
  console.log('global beforeEach')
  next()
})
router.beforeResolve((to, from, next) => {
  console.log('global beforeResolve')
  next()
})
router.afterEach((to, from) => {
  console.log('global afterEach')
})

new Vue({
  router,
  render: (h) => h(App)
}).$mount(root)

在 router.js文件 中的路由守卫，路由级钩子 

import Login from '../views/login/login.vue'

export default [
  {
    path: '/login',
    component: Login,
    beforeEnter (to, from, next) {
      console.log('router beforeEnter')
      next()
    }
  }
]

在 .vue文件中 的路由守卫，组件级钩子

<template>
  <div>
    组件级钩子
  </div>
</template>

<script>
export default {
  mounted () {
    console.log('mounted')
  },
  beforeRouteEnter (to, from, next) {
    console.log('component beforeRouteEnter')
    next()
  },
  beforeRouteUpdate (to, from, next) {
    console.log('component beforeRouteUpdate')
    next()
  },
  beforeRouteLeave(to,from,next){
    console.log('component beforeRouteLeave')
    next()
  }
}
</script>

由其他页面进入有组件路由的页面：

global beforeEach → router beforeEnter → component beforeRouteEnter → global beforeResolve → global afterEach → mounted

由有组件路由的页面回到其他页面：

component beforeRouteLeave → global beforeEach → global beforeResolve → global afterEach

排除beforeRouteUpdate，其余六个导航钩子的执行时机其实很好理解。大体按照leave、before、enter、resolve、after的顺序并全局优先的思路执行。beforeRouteUpdate的触发是在动态路由情形下，比如 path: '/user/:userName' 这条路由，当页面不变更只动态的改变参数userName时，beforeRouteUpdate便会触发。

总结

使用vue组件拼凑成整个应用，每个页面是独立的，路由依靠链接跳转，会刷新页面。使用vue-router则可以不刷新页面加载对应组件，hash和history模式模拟路径变化，不会刷新页面。

附录

参考文章：vue-router使用总结

与君共勉：再牛逼的梦想，也抵不住傻逼般的坚持！