Vue技能点--切换路由时保留页面状态

点此查看全部文字教程、视频教程、源代码

1. 场景

左侧是导航菜单，点击后可以打开多个页面，通过标签切换已打开的页面。

但是切换时，Vue路由默认地会重新加载每个路由页面，现在的需求就是想实现保留每个页面的状态，比如输入的文字，不在切换页面时丢失状态。

2. 解决方案

首先将<router-view通过<keep-alive>标签包裹起来，注意exclude="Dashboard"属性表示不保留状态的页面组件名称。

     	<keep-alive exclude="Dashboard">
          <router-link :to="item.path" class="tags-li-title">
            {{item.title}}
          </router-link>
        </keep-alive>

其次，需要为想保留状态的页面添加名称，如下该页面名称为AppForm且不是被排除的Dashboard，所以其状态可以保留。

export default {
  name: 'AppForm',
  data() {
    return {
    }
  }
}

最后，在我的测试中，如果不为组件添加name名称，则该组件页面状态将无法保留。