vue路由keep-alive的使用

vue中keep-alive使用注意几点

主要用于保存当前的状态，可用于列表详情，浏览进度保存等

• 当第一次页面访问的时候生命周期顺序为 create > mounted > activated > deactivated，下次再访问页面时从activated开始
• 由于生命周期失效，若想数据重新渲染可以将数据存一份，或者直接将mounted/create的代码拷贝至activated
• 想保存滚动条的位置需结合vuex一起使用，具体实现是：
  • 实时保存滚动条距离顶部的位置到vuex中
  • 当进入页面时取出滚动条高度的值为滚动条赋值

路由配置

export default new Router({
  routes: [
    {
      path: '/helloWorld',
      name: 'HelloWorld',
      component: HelloWorld,
      meta: {
        keepAlive: true  //保存页面状态
      }
    }, {
      path: '/test',
      name: 'test',
      component: test
    }, {
      path: '/',
      name: 'test',
      component: test1
    }
  ]
})

实时记录滚动高度

	


	methods: {
	    recordScrollPosition(e) {
	        this.$store.dispatch("setHomeListTop", e.target.scrollTop);    //实时存入到vuex中
	    }
	},
	activated() {
	    let that = this;
	    this.$refs.scroll.scrollTop = this.home_list_top;        //this.$refs.scroll拿到滚动的dom，即scrollContainer，this.home_list_top是存入到vuex里的值
	    this.$refs.scroll.addEventListener("scroll", that.recordScrollPosition);    //添加绑定事件
	},
	deactivated() {  //keep-alive 的页面跳转时，移除scroll事件
	    let that = this;
	    this.$refs.scroll.removeEventListener("scroll", that.recordScrollPosition);  //清除绑定的scroll事件
	}

若想每次从菜单进入时还原最初状态，建议路由跳转时携带参数区分是否按初始时加载