History 模式/导航守卫/路由懒加载

    History 模式利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

    1. const router = new VueRouter({
    2.   mode: 'history',
    3.   routes: [...]
    4. })

    导航守卫
    切换路由时，有分辨的让某些路径可以直接访问，而对另外一些路径进行中断、跳转或其他操作。
    注意，next()在每个守卫中都至少调用一次。

    1. router.beforeEach((to, from, next) => {
    2.   if (to.matched.some(record => record.meta.requiresAuth)) {
    3.     store.dispatch('checkLogin').then(isLogin=>{
    4.       if (!isLogin) {
    5.         next({
    6.           path: '/login',
    7.           query: { redirect: to.fullPath }
    8.         })
    9.       } else {
    10.         next()
    11.       }    
    12.     })
    13.   } else {
    14.     next() // 确保一定要调用 next()
    15.   }
    16. })

    路由懒加载
    当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。

    1. import ('./Foo.vue')