例： 个人中心下的 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>