1.全局的导航守卫
beforeEach：前置钩子函数 使用场景：未登录去下单，跳转到登录页面
router.beforeEach((to, from, next) => {
  // ...
})
afterEach：后置钩子函数
router.afterEach((to, from) => {
  // ...
})

2.单个路由独享的
{
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
}


3.路由分区
先在router文件夹下新建两个文件login.routes.js 和index.routes.js
 //login.routes.js

        export default {

        path: '/login',

        name: 'login',

        component: () => import('../views/login.vue'),

        children: []

    }
//router.js
      import Vue from 'vue'

    import Router from 'vue-router'

    import Home from './views/home.vue'

    Vue.use(Router)

    const routerList = [];

    function importAll(r){

        r.keys().forEach((key) => routerList.push(r(key).default));

    }

    importAll(require.context('./router',true, /\.router\.js/))

    export default new Router({

        routes: [

            {

                path: '/',

                name: 'home',

                component: Home

            },

            ...routerList

        ]

    })