Vue 路由懒加载&导航守卫&keep-alive

• 懒加载组件导入方式

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

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

• 导航守卫

导航守卫主要用来监听监听路由的进入和离开的

/***************导航守卫***************/
// 前置守卫(guard)
router.beforeEach((to, from, next) => {
  // 从from跳转到to
  document.title = to.matched[0].meta.title
  // console.log(to);
  // console.log('++++');
  // 必须主动去调用next()方法
  next()
})

// 后置钩子(hook)
router.afterEach((to, from) => {
  // console.log('----');
})

官网教程：https://router.vuejs.org/zh/guide/advanced/navigation-guards.html

• keep-alive

它是内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。

如果直接router-view被包在 keep-alive 里面，所有路径匹配到的视图组件都会被缓存

keep-alive标签有两个属性：

include:字符串或正则表达，只有匹配的组件会被缓存

exclude:字符串或正则表达式，任何匹配的组件都不会被缓存