http://www.jb51.net/article/138836.htm
vue router动态路由下让每个子路由都是独立组件的解决方案
转载 发布时间:2018年04月24日 11:32:49 作者:asseek 我要评论
这篇文章主要介绍了vue router动态路由下让每个子路由都是独立组件的解决方案,非常不错,具有参考借鉴价值,需要的朋友可以参考下
vue-router 之动态路由
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
vue-router官网上面是这样说的
// 带查询参数,变成 /register?plan=private
router.push({ path: 'register' , query: { plan: 'private' }})
然后,我就这样写了:
this .$router.push({path: 'manage' , query: {id: 'tasklist' }})1
结果很明显,失败了。然后我就默默的再次看了一下官网,结果发现了这句话
// 命名的路由
router.push({ name: 'user' , params: { userId: 123 }})
// 带查询参数,变成 /register?plan=private
router.push({ path: 'register' , params: { plan: 'private' }})
注意:如果提供了 path,params 会被忽略,上述例子中的 query 并不属于这种情况。取而代之的是下面例子的做法,你需要提供路由的 name 或手写完整的带有参数的 path:
const userId = 123
router.push({ name: 'user' , params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
// 这里的 params 不生效
router.push({ path: '/user' , params: { userId }}) // -> /user
谨记啊,动态实现二级路由,需要先用变量保存二级路由名称(let router = 'tasklist' ),然后调用 this .$router.push({path: `/user/${router}`}).
|
下面看下vue router动态路由下让每个子路由都是独立组件的解决方案
因为 vue-router 对嵌套路由采用的是组件复用策略,这在大部分场景的确是高效的做法,但是如果遇到这种情况:
就是要求多个子路由共活,并且有频繁来回切换需求的话,就很希望能让每个子路由都是独立组件了,虽然可以通过监听路由切换
1
2
3
4
5
6
7
8
|
watch: {
'$route' (to) {
if (to.meta.path === '/page/buy-details' ) {
this .id = to.params.id;
this .state()
}
}
},
|
去实时处理更新的数据,我之前一直都是这么做的,包括上面那副动图的页面,但是这真的很麻烦,要让用户切换中准确的回到切换前页面的显示状态,要考虑的东西太多,于是想出了一个解决方案:
子路由组件不涉及实际业务代码,只维护一个打开过的id列表,路由切换到这边时,判断id,没打开过的添加,通过这个列表循环出实际的子路由组件,v-show当前id的,这样就能实现每个实例都是独立的了
我按这个思路写出一个 mixins
details-page.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
|
export default {
watch: {
'$route' (to, from) {
this .detailsLeave(from);
this .detailsOpen(to);
}
},
data() {
return {
pagePath: '' ,
pageId: 0,
pages: {}
}
},
methods: {
/**
* 子页面打开触发
* @param route
*/
detailsOpen(route) {
if ( this .detailsPathGet(route.path) === this .pagePath) {
if (! this .pages[route.params.id]) {
this .$set( this .pages, route.params.id, {
id: route.params.id,
scrollTop: 0
})
}
//路由打开 跳转滚动条
this .pageId = route.params.id;
this .$nextTick(()=>{
this .$parent.$el.firstChild.scrollTop = this .pages[route.params.id].scrollTop;
});
}
},
/**
* 路由切换触发
* 判断离开的路由是否是当前页面,如果是则记录滚动条高度
* @param route
*/
detailsLeave(route) {
if ( this .detailsPathGet(route.path) === this .pagePath) {
if ( this .pages[route.params.id]) {
//记录滚动条高度 此处针对ea-admin后台 不同的框架要记录的滚动条el不同
this .pages[route.params.id].scrollTop = this .$parent.$el.firstChild.scrollTop ;
}
}
},
/**
* 子页面关闭函数
* @param id
*/
detailsClose(id) {
delete this .pages[id]
},
/**
* 取路由不含最后一项参数的地址
* @param path
* @returns {string}
*/
detailsPathGet(path) {
const i = path.lastIndexOf( '/' );
return path.substr(0, i);
}
},
mounted() {
//通过当前路由地址创建页面识别地址 注:只对path: '/user/:id' 有效 当 path: /user/:id/profile 失效
this .pagePath = this .detailsPathGet( this .$route.path);
//执行第一次子页面打开
this .detailsOpen( this .$route);
//监听标签关闭消息 此处针对ea-admin后台 不同框架监听关闭方式不同
this .$tabs.onRemove((page, next) => {
//收到标签关闭回调,判断关闭的是否是当前页面
if (page._path === this .pagePath) {
//触发子页面删除
this .detailsClose(page.id)
}
next()
})
}
}
|
Details.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<template>
<div>
<your-component
v- for = "item in pages"
:id= "item.id"
:key= "item.id"
v-show= "item.id === pageId" >
</your-component>
</div>
</template>
<script>
import YourComponent from '' ;
import detailsPage from '../mixins/details-page'
export default {
name: 'DetailsPage' ,
components: {YourComponent},
mixins: [detailsPage],
}
</script>
|
这样子组件可以只专注处理自己的固定数据,因为组件唯一,不用再去烦恼为每个id存储视图状态了。
总结
以上所述是小编给大家介绍的vue router动态路由下让每个子路由都是独立组件的解决方案,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!