参数不同的多个路由匹配同一个组件,怎么使用keep-alive分别缓存
- Dominant language
- Vue
- Stars
- 16.3k
- Forks
- 4.7k
- PR merge metrics
- No merged PRs in 30d
Description
vue2.5.13 keep-alive,如果不同路由使用的是同一组件,怎么创建不同实例,希望用keep-alive解决。
代码如下:
```
const routes = [{
title: '报表查询',
path: 'AutoQuery/:ReportId',
name: 'AutoQuery',
component: resolve => { require(['@/views/Report/AutoQuery.vue'], resolve); }
}];
```
不同的组件之间切换,页面缓存保存状态,使用keep-alive可以轻松解决这个需求。 但是同一个组件匹配多个不同路由,怎么分别保持状态?
比如:
我访问 AutoQuery /1 和 AutoQuery /2,参数不同,希望打开两个页面分别保存状态(填写的未提交的数据,选项卡的选项,滚动的位置), 这样两个页面填写的内容 就会缓存下来,但是我测试不同路由同一个组件没有成功,我想过用动态路由,但是方案不是很好,因为如果是商品列表到商品详情,我不可能吧所有的商品详情(几万个)的路由都动态添加吧,希望给个思路。谢谢
Contributor guide
No contributing guide indexed for this repository
Research direction
Start with the route definition for AutoQuery/:ReportId and the referenced views/Report/AutoQuery.vue component, then review how Vue 2.5.13 keep-alive handles route changes. Determine an approach that preserves separate unsaved data, tab selections, and scroll positions for AutoQuery/1 and AutoQuery/2 without dynamically adding every route; done means both parameterized views retain independent state.
Written by the indexing model from the issue text.
Assessment
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100