Ant Design Pro of Vue 页签内跳转路由
多页签模式下的页签内切换页面问题描述:在多页签模式下,无论是 $router.push()还是 $router.replace()都会打开一个新的页签,但是有些递进的页面就不需要保留上一个页面,这时就需要在页签内替换页面1、写一个判断路由的方法,返回布尔值//设置页签内需要替换路由的数组(以路由的name值为条件)export const list = [//从页面1跳转到页面2{from:'pa
·
多页签模式下的页签内切换页面
问题描述:在多页签模式下,无论是 $router.push()还是 $router.replace()都会打开一个新的页签,但是有些递进的页面就不需要保留上一个页面,这时就需要在页签内替换页面
1、写一个判断路由的方法,返回布尔值
//设置页签内需要替换路由的数组(以路由的name值为条件)
export const list = [
// 从页面1跳转到页面2
{from:'page1',to:'page2'},
。。。more
]
//通过前后路由的name判断该路由是替换还是添加
export function needRemoveFrom(a,b){
for(let i in list){
if(list[i].from==b && list[i].to==a){
return true
}
}
return false
}
2、监听路由
(在页签组件:src/components/MultiTab/MultiTab.vue 中找到监听事件)
watch: {
'$route': function (newVal,oldVal) {
// 在这里加入以下判断条件,本页面其余代码不动
if(needRemoveFrom(newVal.name,oldVal.name)) {
this.closeThat(oldVal.fullPath)
}
}
},
更多推荐
已为社区贡献2条内容
所有评论(0)