【vue】实现多个路由共享同一个页面
业务需求,多页面业务场景共用同一个模板,换不同路由地址请求,在同一个页面模板上返回不同数据。[index.js]设置多个路由指向同一页面,注意path和name必须具有唯一性{path: '/column',name: 'column',component: () => import('../components/partycolumn/ColumnPage')},{path: '/colu
业务需求,多页面业务场景共用同一个模板,换不同路由地址请求,在同一个页面模板上返回不同数据。
[index.js]
设置多个路由指向同一页面,注意path和name必须具有唯一性
{
path: '/column',
name: 'column',
component: () => import('../components/partycolumn/ColumnPage')
},
{
path: '/column1',
name: 'column1',
component: () => import('../components/partycolumn/ColumnPage')
},
{
path: '/column2',
name: 'column2',
component: () => import('../components/partycolumn/ColumnPage')
}
[ColumnPage.vue]
<template>
<h1>{{ title }}</h1>
</template>
<script>
export default {
name: 'ColumnPage',
data () {
return {
title: ''
}
},
methods: {
resetData () {
// 根据不同路由地址,返回不同数据
if (this.$route.fullPath === '/column') {
document.title = '专栏' // 修改网页title
this.title = '专栏' // 返回业务数据
} else if (this.$route.fullPath === '/column1') {
document.title = '专栏1'
this.title = '专栏1'
} else if (this.$route.fullPath === '/column2') {
document.title = '专栏2'
this.title = '专栏2'
}
}
},
created () {
this.resetData()
},
watch: {
$route: {
handler: 'resetData'
}
}
}
</script>
<style scoped>
</style>
参考
https://blog.csdn.net/qq_36545813/article/details/108241978
【问题记录】
给 [ColumnPage.vue] 添加了子页面 [SectionPage.vue]
<router-view/>
路由结构如下
{ // - column1 -
path: '/party/column1',
name: 'Column1',
component: () => import('../components/column/ColumnPage'),
redirect: '/party/column1/section',
children: [
{
path: 'section',
name: 'Column1',
component: () => import('../components/column/SectionPage')
}
]
},
{ // - column2 -
path: '/party/column2',
name: 'Column2',
component: () => import('../components/column/ColumnPage'),
redirect: '/party/column2/section',
children: [
{
path: 'section',
name: 'Column2',
component: () => import('../components/column/SectionPage')
}
]
},
{ // - column3 -
path: '/party/column3',
name: 'Column3',
component: () => import('../components/column/ColumnPage'),
redirect: '/party/column3/section',
children: [
{
path: 'section',
name: 'Column3',
component: () => import('../components/column/SectionPage')
}
]
}
需要注意的是:
(1)父组件和子组件的name属性必须保持一致,不然父组件渲染会出问题,因为父组件是根据name属性进行渲染的
(2)children的 path: 'section' 等价于 path: 'party/column1/section'
[SectionPage.vue]
column_name 在 [ColumnPage.vue] 页面中根据路由判断渲染数据时添加保存的
<template>
<h1>{{ section }}</h1>
</template>
<script>
export default {
name: 'SectionPage',
data () {
return {
section: ''
}
},
methods: {},
created () {
this.section = window.sessionStorage.getItem('column_name')
}
}
</script>
<style scoped>
</style>
运行发现当切换路由时,[ColumnPage.vue]的内容切换了,但是[SectionPage.vue] 的内容没有修改,当重新刷新页面,值取到了。
说明在进行路由切换的时候 [SectionPage.vue] 中的created并没有执行,当重新刷新页面之后,才执行created
原因:vue的生命周期,官方文档说明如下
【解决方案】
#1 -> 给<router-view>添加key值,保证每一次组件渲染都有不同的ID值,这样保证created每次都会执行,注意key必须具有唯一性。
<router-view :key="this.$route.fullPath"/>
#2 -> [SectionPage.vue] 添加watch监听路由变化,也是官方给出的推荐解决方案
watch: {
$route (to, from) {
// 对路由变化作出响应...
this.section = window.sessionStorage.getItem('column_name')
}
}
#3 -> keep-alive + activiated 实现
参考
https://blog.csdn.net/muyun666/article/details/108751912
https://blog.csdn.net/qq_41485414/article/details/113698404
更多推荐
所有评论(0)