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名称,则该组件页面状态将无法保留。
上一篇: iview可编辑表格的实现
下一篇: PHP生成唯一订单号的6种方法