在原创的基础上稍稍改动了一下
本文是为了记录曾经踩过的坑,愿以后的日子里不再踩坑
大家在用element-ui的tab切换时,可能会遇到这样的问题,就是比如我在标签页2新增了东西,要刷新页面,但是刷新后回到标签页1,这样又要点回去,就很麻烦,我遇到时是用下面的方法解决的,可能会很low,毕竟我还是个vue小白,如果哪个大神有更好的解决方法,请不吝赐教,感激不尽~
思路是这样的:
- 我希望可以通过url后的参数来区分这3个不同的tab,
- 根据视图改变url,根据url展示不同的视图,实现视图和url的同步,
- 这样即使刷新页面,因为url没有改变,视图也会回到刷新前的那个tab。
实现:
- @tab-click 是点击切换tab时的勾子,切换时更改url
- 刷新后,再通过url的不同展示不同的视图
<template>
<div>
<el-card style="position: relative;">
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="标签页1" name="aaa">
<aaa-tab name="aaa"></aaa-tab>
</el-tab-pane>
<el-tab-pane label="标签页2" name="bbb">
<bbb-tab name="bbb"></bbb-tab>
</el-tab-pane>
<el-tab-pane label="标签页3" name="ccc">
<ccc-tab name="ccc"></ccc-tab>
</el-tab-pane>
</el-tabs>
</el-card>
</div>
</template>
export default {
data() {
return {
//activeName 是默认选中的tab,如果不写则会展示空白页面
//这里默认展示第一个tab
activeName: 'aaa'
};
},
//组件
components: {
aaaTab,
bbbTab,
cccTab
},
mounted() {
//挂载时通过this.$route.query.type拿到url后的参数
this.updateType();
},
methods: {
updateType() {
let type = this.$route.query.type;
//通过拿到的值不同,更改activeName的值
if(type === '1') {
this.activeName = 'aaa';
}else if(type === '2') {
this.activeName = 'bbb';
}else if(type === '3') {
this.activeName = 'ccc';
}
},
// 切换tab时再根据标签名的不同将url中的参数值改掉
handleClick(tab) {
let queryType;
if(tab.name == 'aaa') {
queryType = 1;
}else if(tab.name == 'bbb') {
queryType = 2;
}else if(tab.name == 'ccc') {
queryType = 3;
}
//将新的值和url放在一起拼成一个完整的路径
this.$router.push({
path: '/qqqqq/wwwww/page.do',
query: {
type: queryType || 1
}
});
}
}
};
初始的时候由于没有参数值也没有点击切换,所以刷新的时候自然是展示第一个tab,所以也不用担心这个问题啦~
由于小白一枚,所以急需大神指点~
,
本文是为了记录曾经踩过的坑,愿以后的日子里不再踩坑
大家在用element-ui的tab切换时,可能会遇到这样的问题,就是比如我在标签页2新增了东西,要刷新页面,但是刷新后回到标签页1,这样又要点回去,就很麻烦,我遇到时是用下面的方法解决的,可能会很low,毕竟我还是个vue小白,如果哪个大神有更好的解决方法,请不吝赐教,感激不尽~
思路是这样的:
- 我希望可以通过url后的参数来区分这3个不同的tab,
- 根据视图改变url,根据url展示不同的视图,实现视图和url的同步,
- 这样即使刷新页面,因为url没有改变,视图也会回到刷新前的那个tab。
实现:
- @tab-click 是点击切换tab时的勾子,切换时更改url
- 刷新后,再通过url的不同展示不同的视图
<template>
<div>
<el-card style="position: relative;">
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="标签页1" name="aaa">
<aaa-tab name="aaa"></aaa-tab>
</el-tab-pane>
<el-tab-pane label="标签页2" name="bbb">
<bbb-tab name="bbb"></bbb-tab>
</el-tab-pane>
<el-tab-pane label="标签页3" name="ccc">
<ccc-tab name="ccc"></ccc-tab>
</el-tab-pane>
</el-tabs>
</el-card>
</div>
</template>
export default {
data() {
return {
//activeName 是默认选中的tab,如果不写则会展示空白页面
//这里默认展示第一个tab
activeName: 'aaa'
};
},
//组件
components: {
aaaTab,
bbbTab,
cccTab
},
mounted() {
//挂载时通过this.$route.query.type拿到url后的参数
this.updateType();
},
methods: {
updateType() {
let type = this.$route.query.type;
//通过拿到的值不同,更改activeName的值
if(type === '1') {
this.activeName = 'aaa';
}else if(type === '2') {
this.activeName = 'bbb';
}else if(type === '3') {
this.activeName = 'ccc';
}
},
// 切换tab时再根据标签名的不同将url中的参数值改掉
handleClick(tab) {
let queryType;
if(tab.name == 'aaa') {
queryType = 1;
}else if(tab.name == 'bbb') {
queryType = 2;
}else if(tab.name == 'ccc') {
queryType = 3;
}
//将新的值和url放在一起拼成一个完整的路径
this.$router.push({
path: '/qqqqq/wwwww/page.do',
query: {
type: queryType || 1
}
});
}
}
};
初始的时候由于没有参数值也没有点击切换,所以刷新的时候自然是展示第一个tab,所以也不用担心这个问题啦~
由于小白一枚,所以急需大神指点~