在原创的基础上稍稍改动了一下
本文是为了记录曾经踩过的坑，愿以后的日子里不再踩坑
大家在用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，所以也不用担心这个问题啦～
由于小白一枚，所以急需大神指点～
