router导航守卫

Vue-router

Vue-router-全局导航守卫: beforeEach() 跟 afterEach()是全局守卫，只要跳转就会调用这两个函数

1、beforeEach()： 前置守卫（guard）:

#全局导航守卫应用： 动态修改网页的标题？	beforeEach函数的使用， 当然我们也可以在每个vue页面实现create(){document.title="首页"}，页面太多无法维护，所以使用导航守卫, 前置钩子beforeEach()，就是路由跳转回调，跳转之前就把标题给改掉。

{
    path: '/user/:id',
    component: User,
    meta: {
        title: '首页'
    }
}
# 当我们从 一个路由 跳转到 另一个路由 的时候，就会执行这个函数
router.beforeEach((to, from, next) => {
    // 从 from 跳转到 to
    document.title = to.meta.title	//如果路由存在嵌套，是拿不到的，会显示undefind，需要改进： document.title = to.matched=[0].meta.title
    next()		//next必须调用，否则无法跳转
})

2、afterEach()： 后置钩子（hook）:

#在路由跳转之后进行回调
router.afterEach((to, from) =>{
    
})

3、除了全局守卫，还有路由独享守卫、组件内守卫等:

{
    path: '/user/:id',
    component: User,
    meta: {
        title: '首页'
    },
    beforeEnter: (to, from, next) => {	//在beforeEach后， afterEach前执行
    	console.log("about beforeEnter")
    	next()
    }
}

keep-alive 遇见 vue-router

keep-alive是vue内置的组件: 可以缓存，避免重新渲染

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

在首页写如代码进行测试
create(){
    console.log("home created...")
}
destory(){
    console.log("home destory...")
}
当我们从首页跳转到其他路由页面时，执行destory()。每次创建销毁，重新创建新的，将代码包含在keep-alive标签中就行,这样路由是不会被销毁的，只会创建一次
<keep-alive>
	<router-view/>	//这个标签相当于占位
</keep-alive>
注： 保持路由状态代码如下：
	activated(){
    	this.$router.push(this.path)
	} 跟 
    deactivated(){
        console.log('deactivated...')
    }这两个函数只有使用了<keep-alive>标签才能生效。

	beforeRouteLeaver(to, from, next){
        console.log(this.$route.path)
        this.path = this.$route.path;
        next()
    }

2）、如果先要单独某个组件不被缓存，重新创建，只需要添加属性即可，如下
<keep-alive excude='Profile,Home'>	//Profile，Home是组件name名字，Profile，Home组件之间不可以加上空格。
	<router-view/>	
</keep-alive>