我们之前虽然成功的让自由跳转到想要的路由，但是有没有发现一个问题，每个页面的标题都是固定的，那我们要如何改变每个网页的标题呢？ HTML：我们可通过<title>来显示，要主动的去给你每一个网页添加title标签 JS: 我们可以通过window.document.title = '新的标题'来修改标题 VUE：那我们来考虑一下，在VUE项目中，要在哪里修改呢？
比较容易想到的方法就是在每个组件中，在created生命周期函数中，添加修改标题代码来修改。
created() { doucument.title = '新的标题' }但是当页面比较多是，这种方式不容易维护（因为要在多个页面执行类似的代码）
更好的方式就是使用导航守卫
vue-router提供的到行守卫主要用来监听路由的进入和离开的。vue-router提供了beforeEach（守卫guard）和affterEach的钩子（hook）函数，他们会在路由即将改变前和改变后触发。 上代码：（的参数是个函数函数中有三个参数） router.beforeEach((to, from, next) => { //从from跳转到to document.title = to.mecthed[0].meta.title; next(); }) //再router/index.js中每个路由中添加meta属性中再添加title属性 { path: '/user/:userId', component: user, meta: { title: '用户' }, }, { path: '/profileTest', component: profileTest, meta: { title: '档案' }, }如果是后置钩子，也就是afterEach，不需要主动调用next()函数
上面使用的导航守卫，被称为全局首位
路由独享的守卫组件内的守卫keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。 vue生命周期函数 created 和 destroyed created 在组件加载之前执行 destroyed 销毁之后执行
注意：生命周期函数使vue自动生成的，不能写在methods里面 我们以之前写的home组件为例, 添加如下代码：
created() { console.log('created home') }, destroyed() { console.log('destroyed home') },而当打开项目时，由于默认打开的home路由，所以之间显示：created home 当我们跳转到别的页面时： 这两个打印就很清晰的表达出了created 和 destoryed分别是什么时候执行的。、
现在我们来考虑下面一个问题：（还是以之前写的小demo为例）
现在我们的状态处于首页中的消息时
当我们此时点击除了首页的其他链接都会跳转到相应的页面，但是再当我们点击首页的时候，默认显示的是首页中的新闻。当我们现在想让router记住我们上一个状态时，我们可以这样设置：
//在离开之前通过beforeRouteLeave()记录当前的路由 beforeRouteLeave(to, from, next) { this.path = this.$route.path; next(); } //在路由返回是也就是home路由活跃时返回记录的路由 activated() { this.$router.push(this.path); }activated必须在该组件的 router-view 被keep-alive标签包裹时才能触发；deactivated也一样。
<keep-alive> <router-view/> </keep-alive>不加activated是不会执行的。 虽然这样写成功返回了想要的地方，但是这时控制台又抛出了一个错误 不知道哪儿错了就去百度了下 说在router/index.js 中重写push方法:
const routerPush = VueRouter.prototype.push VueRouter.prototype.push = function push(location) { return routerPush.call(this, location).catch(error=> error) }试着加了这几行代码，错误消除了。
如果要取消某个组件可使用exclude
<keep-alive exlude="About,User"> //注意这里添加的是组件的name 这里不能加空格 <router-view> </keep-alive>