欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Vue 路由 标签页切换时保留页面状态不重新加载

程序员文章站 2022-06-08 17:13:01
...

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名称,则该组件页面状态将无法保留。