例:
个人中心下的 tab 使用:
实现效果: (1) 当点击“个人中心” 下不同的 tab 跳转到 /userCenter?type=“xx” : 通过 this.
r
o
u
t
e
r
.
p
u
s
h
实
现
(
2
)
当
点
“
个
人
中
心
”
的
时
候
,
跳
到
第
一
个
t
a
b
页
(
如
果
是
在
第
2
个
t
a
b
页
,
也
切
换
至
第
一
个
t
a
b
页
)
:
通
过
监
听
′
router.push 实现 (2) 当点“个人中心”的时候,跳到第一个 tab 页(如果是在第2个tab页,也切换至第一个tab页) : 通过监听 '
router.push实现(2)当点“个人中心”的时候,跳到第一个tab页(如果是在第2个tab页,也切换至第一个tab页):通过监听′route.query’ 实现
一、使用 query
//个人中心下的tab标签使用
<template>
<div>
<el-tabs type="card" v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="历史记录" name="1"></el-tab-pane>
<el-tab-pane label="我的收藏" name="2"></el-tab-pane>
<el-tab-pane label="我的关注" name="3"></el-tab-pane>
</el-tabs>
<div class="tab-content">
<keep-alive>
<component :is="curComponents[activeName]"></component>
</keep-alive>
</div>
</div>
</template>
<script>
import History from "./components/history";
import Collect from "./components/collect ";
import Watch from "./components/watch";
export default {
data() {
return {
activeName: '',
curComponents: {
'1': 'History',
'2': 'Collect',
'3': 'Watch',
},
}
},
created() {
this.activeName = this.$route.query.type || '1';
},
components: { History, Collect, Watch},
methods: {
handleClick(tab) {
this.activeName = tab.name;
this.$router.push({
path: '/userCenter',
query: { type: this.activeName }
})
},
},
watch: {
'$route.query': {
handler(newval, oldval) {
this.activeName = newval.type;
},
immediate: true
}
}
}
</script>
下方是我微信公众号的二维码,可以扫码关注以下,后期博文推送主要在公众号上面,有什么问题也可以通过公众号跟我发消息哦~
二、使用 params(注:使用 params 的时候,要在配置路由的时候加 /userCenter/:type)
<script>
import History from "./components/history";
import Collect from "./components/collect ";
import Watch from "./components/watch";
export default {
data() {
return {
activeName: '',
curComponents: {
'1': 'History',
'2': 'Collect',
'3': 'Watch',
},
}
},
created() {
this.activeName = this.$route.params.type || '1';
},
components: { History, Collect, Watch},
methods: {
handleClick(tab) {
this.activeName = tab.name;
this.$router.push({
name: 'userCenter',
params: { type: this.activeName }
});
},
},
watch: {
'$route.params': {
handler(newval, oldval) {
// console.log(newval)
this.activeName = newval.type;
},
immediate: true
},
}
}
</script>