vue-router与keep-alive

vue-router与keep-alive

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

router-vue是vue-router里注册地组件，我们之前学了它是一个占位符，如果 被包裹在keep-alive里边，所有路径匹配到地视图组件都会被缓存

我们知道vue生命周期，里边有很多的回调函数，当到不同的阶段会执行对应的回调函数。

那一个vue实例何时开始和结束呢，我们在Home.vue里自定义该回调函数

/*创建组件时会进行回调的*/
created() {
  console.log('created')
},
/**/
destroyed() {
  console.log('destroyed') 
}

然后我们发现，我们看到首页时，显示created，切换路由时，显示destroyed。再次切换回来又出现了created,说明，每次路由切换，对应的vue实例都会经历创建和销毁的过程，返回时不会保留缓存。

使用keep-alive

将对应位置的占位符router-view用keep-alive包裹即可

<keep-alive>
  <router-view/>
</keep-alive>

此时切换页面并不会销毁页面

有一个问题，我首页有消息和新闻两个按钮，我想进入首页时，直接显示新闻，然后我点击消息，切换到消息，然后切出首页，返回时首页又是显示新闻，而我想保留开始的消息页面

补充一下

/*当页面活跃执行函数*/
activated() {
},
/*不活跃页面执行函数*/
deactivated() {
}

这两个函数不像created/destroyed,什么时候都可以被调用，只有该组件保持了状态使用了keep-alive时，才会生效。

也就是想上边一样，我们使用了keep-alive包裹着router-view标签，那么router-link（自定义事件跳转）里的对应组件都会保留状态

实现上边的效果，我们不使用重定向，直接保存一个路由地址

data() {
  return {
    message: '你好啊',
    path:'/home/news'
  }
},

这个地址就是为了我们进入home页面直接跳转到news页面

/*活跃页面执行函数*/
activated() {
  this.$router.push(thi.path)
},
/*不活跃页面执行函数*/
deactivated() {
  this.path=this.$route.path
}

我们在首页里定义的activaed和deactivaed函数，当home页面被点击活跃时，将新闻页面路由push进栈，显示新闻页面。

当切换页面时，首页不再活跃，执行deactivaed函数，将活跃的路由地址替换成默认地址，即是保存上一次地址

注意这两个route和router不同

失败：

因为这个deactivaed函数是进入不活跃时调用的，此时活跃的页面已经是下一个页面了，而不是刚刚活跃的那个页面。比如我进来是首页下的新闻页面，我点击消息页面，此时活跃的是消息页面，我想把消息页面路由保存下来，可是切换到用户页面时，此时的活跃页面已经不活跃了，再执行router就无法保存，我们必须在页面切换之前保存当前的活跃页面

改进：

组件内的守卫:

我们使用最后一个beforeRouterLeave来代替deactivaed，当页面要离开之前，此时活跃页面还是当前页面，保存地址。

beforeRouteLeave (to, from, next) {
   this.path = this.$route.path;
   next()
}

注意是this.path，上边之前我写成path，在方法里调用data数据要加上this.

实现了目的。

注意点

我们在app.vue里设置keep-alive只能对app.vue里使用该占位符的路由起作用，也就是只有首页/关于/用户/档案等路由会被保存状态，首页自己的子组件不会被保存状态，除非再对home.vue里的router-view设置keep-alive.

如果我们单独不像让档案保存状态每次刷新呢？

可以使用include/exclude属性来实现

<keep-alive exclude="Profile,User">
  <router-view/>
</keep-alive>

exclude/include里边字符串就是组件对应的名字,name属性在这里有用，并且多个name之间不能有空格，空格不是想加就加的。正则里也不能随意加空格。