一.路由的理解

路由：就是帮助你找到东西的导游（也是路标），在vue中路由指向的是组件，需要怎么展示就把对应的组件渲染出来，由路由去控制整个流程

二.vue-router的使用

安装
1.vue-router是一个插件，不在vue中，要使用先安装，然后引入/挂载，最后根据路径配置组件
（1）.在main.js同级目录下建立router文件夹，然后在里面创建index.js，基本如下：

1. 引入vue、vue-router并使用，引入其他需要的组件如这个的Home.vue

import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home.vue";

Vue.use(VueRouter);

2. 在vue-router实例中配置路由表

import layout from './views/common/layout.vue';
const constantRouterMap = [
  {
    path: '',
    name: "empty",
    component: () => import('./views/home/index.vue')
  },  
  {
    path: '/login',
    name: "Login",
    component: () => import('./views/login/index.vue')
  },
  {
    name: 'layout-about',
    path: '/about',
    // redirect: '/about', //重定向
    component: layout, // 让about的组件在layout中渲染
    children: [
      {
        path: 'index', //指向根文件
        name: 'about',
        // 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: () => import('./views/about/index.vue'),

      },
      {
        path: 'indexA', //指向根文件
        name: 'aboutA',
        component: () => import('./views/about/aa.vue')
      },      

    ]
  },
  {
    name: 'layout-test',
    path: '/test',
    // redirect: '/test', //重定向
    component: layout, // 让about的组件在layout中渲染
    children: [{
      path: '/test', //指向根文件
      name: 'test',
      component: () => import('./views/test/index.vue')
    }]
  },
  {
    name: 'layout-calendar',
    path: '/calendar',
    // redirect: '/test', //重定向
    component: layout, // 让about的组件在layout中渲染
    children: [{
      path: '/calendar', //指向根文件
      name: 'calendar',
      component: () => import('./views/calendar/index.vue')
    }]
  },
  {
    name: 'layout-tab',
    path: '/tab',
    // redirect: '/test', //重定向
    component: layout, // 让about的组件在layout中渲染
    children: [{
      path: '/tab', //指向根文件
      name: 'tab',
      // component: () => import('./views/tab/tab.vue')
      component: () => import('./views/tab/index.vue')      
    }]
  },  
  {
    name: 'layout-tabTest',
    path: '/tabTest',
    // redirect: '/test', //重定向
    component: layout, // 让about的组件在layout中渲染
    children: [{
      path: '/tabTest', //指向根文件
      name: 'tabTest',
      component: () => import('./views/tabTest/index.vue')
    }]
  },  
  {
    name: 'layout-AntV',
    path: '/AntV',
    // redirect: '/test', //重定向
    component: layout, // 让about的组件在layout中渲染
    children: [{
      path: '/AntV', //指向根文件
      name: 'AntV',
      component: () => import('./views/AntV/index.vue')
    }]
  }, 
  {
    name: 'layout-flowchart',
    path: '/flowchart',
    // redirect: '/test', //重定向
    component: layout, // 让about的组件在layout中渲染
    children: [{
      path: '/flowchart', //指向根文件
      name: 'flowchart',
      component: () => import('./views/flowchartnew4/index.vue')
    }]
  }, 
  {
    name: 'layout-pdf',
    path: '/pdf',
    // redirect: '/test', //重定向
    component: layout, // 让about的组件在layout中渲染
    children: [{
      path: '/pdf', //指向根文件
      name: 'pdf',
      component: () => import('./views/pdf/index.vue')
    }]
  },    
  {
    name: 'vuex-demo',
    path: '/vuexDemo',
    // redirect: '/test', //重定向
    component: layout, // 让about的组件在layout中渲染
    children: [{
      path: '/vuexDemo', //指向根文件
      name: 'vuexDemo',
      component: () => import('./views/vuexDemo/index.vue')
    }]
  }, 
  {
    name: '书籍',
    path: '/book',
    component: layout, // 让about的组件在layout中渲染
    children: [
      {
        path: 'all', //指向根文件
        name: '全部书籍',
        component: () => import('./views/book/index.vue'),
        children:
          [
            {
              path: 'aiqing', //指向根文件
              name: '爱情',
              // 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: () => import('./views/book/module/aiqing.vue')
            },
            {
              path: 'wenxue', //指向根文件
              name: '文学',
              component: () => import('./views/book/module/wenxue.vue')
            },
            {
              path: 'xiaoshuo', //指向根文件
              name: '小说',
              component: () => import('./views/book/module/xiaoshuo.vue')
            },

          ]

      },
                  
  ]
  },      


]

3. 导出vue-router实例

export default new Router({
  // mode: 'history', // require service support
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRouterMap
})

三.vue-router的导航守卫（即：关卡（权限渲染等））

进阶-导航守卫
1.全局导航守卫(三种：前，中，后)

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
  // ...
})
router.beforeResolve((to, from, next) =>{
  //...
})
router.afterEach((to, from) => {
  // ...
})

2.路由导航守卫（一种：前）

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

3.组件内守卫（三种：前，中，后）

export default {
  data () {
    return {
    }
  },
  beforeRouteEnter (to, from, next) {
     // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
  },
  // 路由改变前，组件就已经渲染完了
  beforeRouteUpdate (to, from, next) {
 //可以访问组件实例 `this`
     this.setData (123) 
  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
    this.setData (456) 
  },
  methods: {
    setData (log) {
     console.log(log)
    }
  }

4.完整的导航解析流程
（1）导航被触发。
（2）在失活的组件里调用离开守卫。
（3）调用全局的 beforeEach 守卫。
（4）在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
（5）在路由配置里调用 beforeEnter。
（6）解析异步路由组件。
（7）在被激活的组件里调用 beforeRouteEnter。
（8）调用全局的 beforeResolve 守卫 (2.5+)。
（9）导航被确认。
（10）调用全局的 afterEach 钩子。
（11）触发 DOM 更新。
（12）用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。

四.vue-router的路由元信息（meta）可配置各种信息，如：权限

进阶-路由元信息

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      children: [
        {
          path: 'bar',
          component: Bar,
          // a meta field
          meta: {
              title: '标题',
              icon: 'icomName',
              roles:['admin','editor'],
              requiresAuth: true,
              ...
         }
        }
      ]
    }
  ]
})

五.vue-router的过渡动效

进阶-过渡动效
<router-view> 是基本的动态组件，所以我们可以用 <transition> 组件给它添加一些过渡效果：

<transition>
  <router-view></router-view>
</transition>

六.vue-router的滚动行为

进阶-滚动行为
使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。
注意: 这个功能只在支持 history.pushState 的浏览器中可用。
当创建一个 Router 实例，你可以提供一个 scrollBehavior 方法：

const router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    // return 期望滚动到哪个的位置
  }
})

七.vue-router的路由懒加载

进阶-路由懒加载
当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。
结合 Vue 的异步组件和 Webpack 的代码分割功能，轻松实现路由组件的懒加载。

注意：

如果您使用的是 Babel，你将需要添加 syntax-dynamic-import 插件，才能使 Babel 可以正确地解析语法。
1.先引入再用（能够被 Webpack 自动代码分割的异步组件）

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

1.直接引入使用（可以把某个路由下的所有组件都打包在同个异步块 (chunk) 中）

const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')

八.vue-router的跳转及传参

Vue传参
Vue Router 的params和query传参的使用和区别