详解vue-router 动态路由下子页面多页共活的解决方案

我们都知道 vue-router 的动态路由匹配 对组件是原地复用的策略，需要我们在组件中根据不同的 $route 参数展示不同的数据，这在大部分情景下是很高效的做法，但这无疑增加了组件的复杂度，而且不同参数间切换因为是同组件复用，切换效果不加修饰的话会显得很生硬，这里放一张图片感受一下。

如果我们希望能够每个动态参数都能渲染出一个组件而不是去复用怎么办呢？

我这里提供一个简便的方案

通常动态路由我们都是用来处理详情页

const router = new VueRouter({
routes: [
// 动态路径参数 以冒号开头
{ path: '/user/:id', component: User, props: true }
]
})

User.vue

<template>
<div>{{ user.name }}</div>
</template>
<script>
export default {
name: 'User',
props: ['id'],
data() {
return {data: {}};
},
watch: {
id(id) {
this.getUser(id);
},
},
computed: {
user() {
return this.data[this.id] || {name: ''};
},
},
methods: {
getUser(id) {
setTimeout(() => { // 假装异步
this.data[id] = {id, name: '张' + id};
}, 1000);
},
},
mounted() {
this.getUser(this.id);
},
};
</script>

我们可以发现基本上这样的组件是围绕着 路径参数 即例子中的 id 做处理和渲染，只要我们能提取到这个 路径参数 ，并维护成列表，通过这个列表来渲染实际组件，然后通过 v-show 显示当前 路径参数 下的组件，就可以实现不同参数不同组件的效果了。

简单的来个例子

<template>
<div>
<user
v-for="_id in idList"
v-show="_id === id"
:id="_id"
:key="_id"
/>
</div>
</template>
<script>
import User from './User.vue';

export default {
name: 'UserPage',
components: {
User,
},
props: ['id'],
data() {
return {
idList: [this.id],
};
},
watch: {
id(id) {
if (!this.idList.includes(id)) this.idList.push(id);
},
},
};
</script>

然后把这个组件作为 router 组件

{ path: '/user/:id', component: UserPage, props: true }

现在我们完成解耦，同路由组件间参数转变切换的是真实组件了，这里再放一张图片感受一下。

这个方案说明白了很简单，但还是有一些细节要注意处理，比如记录不同参数页面的滚动条高度，比如怎么处理子页面关闭等等，我的开源项目 e-admin 提供的 ea-view 组件对这个解决方案做了完整的细节处理，有兴趣的话可以参考一下ea-view 。

我正在造一个基于 element-ui 的中后台框架轮子e-admin 欢迎star

以上就是本文的全部内容，希望对大家的学习有所帮助

您可能感兴趣的文章:

• vue学习之Vue-Router用法实例分析
• 浅析vue-router中params和query的区别
• vue-router结合vuex实现用户权限控制功能
• vue实现权限控制路由(vue-router 动态添加路由)
• 解决vue-router 二级导航默认选中某一选项的问题
• vue-router 中 meta的用法详解
• 浅谈vue-router路由切换 组件重用挖下的坑
• vue-router之实现导航切换过渡动画效果
• 使用vue-router切换页面时实现设置过渡动画
• vue-router的钩子函数用法实例分析
• vue-router路由模式详解(小结)
• vue-router两种模式区别及使用注意事项详解
• vue-router跳转时打开新页面的两种方法
• 使用vue-router在Vue页面之间传递数据的方法
• vue-router二级导航切换路由及高亮显示的实现方法
• 移动端底部导航固定配合vue-router实现组件切换功能
• 详解新手使用vue-router传参时注意事项
• Vue路由管理器Vue-router的使用方法详解