我们都知道vue-router的动态路由匹配对组件是原地复用的策略,需要我们在组件中根据不同的美元<代码>路径>
如果我们希望能够每个动态参数都能渲染出一个组件而不是去复用怎么办呢?
我这里提供一个简便的方案
通常动态路由我们都是用来处理详情页
const路由器=new VueRouter ({
路线:[//动态路径参数以冒号开的头
{路径:/user/: id,组件:用户、道具:真正的}
]
})
<代码> User.vue
& lt; template>
& lt; div> {{user.name}} & lt;/div>
& lt;/template>
& lt; script>
出口默认{
名称:“用户”,
道具:“id”,
数据(){
返回{数据:{}};
},
看:{
id (id) {
this.getUser (id);
},
},
计算:{
用户(){
返回this.data(这一点。id] | |{名称:"};
},
},
方法:{
getUser (id) {
setTimeout(()=比;{//假装异步
这一点。数据(id)={id、名称:“张”+ id};
}, 1000);
},
},
安装(){
this.getUser (this.id);
},
};
& lt;/script>
我们可以发现基本上这样的组件是围绕着<代码>路径参数> id> 路径参数> v-show> 路径参数>
简单的来个例子
& lt; template>
& lt; div>
& lt;用户
v代表=癷dList _id”
v-show=" _id===id”
:id=癬id”
:关键=" _id "/比;
& lt;/div>
& lt;/template>
& lt; script>
从“进口用户。/User.vue ';
出口默认{
名称:“UserPage”,
组件:{
用户,
},
道具:“id”,
数据(){
返回{
idList:(this.id),
};
},
看:{
id (id) {
如果(! this.idList.includes (id)) this.idList.push (id);
},
},
};
& lt;/script>
然后把这个组件作为<代码>路由器>
{路径:/user/: id,组件:UserPage,道具:真正}
现在我们完成解耦,同路由组件间参数转变切换的是真实组件了,这里再放一张图片感受一下。
这个方案说明白了很简单,但还是有一些细节要注意处理,比如记录不同参数页面的滚动条高度,比如怎么处理子页面关闭等等,我的开源项目<代码> e-admin> ea-view>
我正在造一个基于<代码> element-ui>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
