懒加载组件导入方式
const Foo = () => import('./Foo.vue')
const router = new VueRouter({routes: [{ path: '/foo', component: Foo }]})
导航守卫
导航守卫主要用来监听监听路由的进入和离开的
/***************导航守卫***************/// 前置守卫(guard)router.beforeEach((to, from, next) => {// 从from跳转到todocument.title = to.matched[0].meta.title// console.log(to);// console.log('++++');// 必须主动去调用next()方法next()})// 后置钩子(hook)router.afterEach((to, from) => {// console.log('----');})
官网教程：/zh/guide/advanced/navigation-guards.html
keep-alive
它是内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。
如果直接router-view被包在 keep-alive 里面，所有路径匹配到的视图组件都会被缓存
keep-alive标签有两个属性：
include:字符串或正则表达，只有匹配的组件会被缓存
exclude:字符串或正则表达式，任何匹配的组件都不会被缓存
<keep-alive exclude="Profile,User"><router-view/></keep-alive>
