本文主要介紹Vue通過watch監聽路由變化,設置active高亮。
1.設置父子路由
在router文件下的index.js 關鍵代碼
routes: [
{
path: '/',
component: resolve => (require(["@/pages/Index"], resolve)),
children: [
{
path: '/',
name: "WorkBench",
component: resolve => (require(["@/pages/WorkBench"], resolve))
},{
path: 'messageList',
name: "MessageList",
component: resolve => (require(["@/pages/MessageList"], resolve))
}
]
},
]
2.在index.vue頁面引入
<template>
<div class="warp">
<router-view />
<div class="tabbar-warpper">
<div
class="tabbar-item"
:class="{'active': selectedPath == item.page }"
@click="getVal(item.page)"
v-for="(item,index) in tabbarDes"
:key="index"
>
<div class="item-icon">
<span class="iconfont" :class="selectedPath == item.page ? item.onIcon : item.icon"></span>
</div>
<div class="item-text" v-text="item.txt"></div>
</div>
</div>
</div>
</template>
樣式和data內的參數請自行整理
主要方法,通過watch校驗路由切換
watch: {
$route(toRouter) {
// console.log(toRouter) //打開的新路由
// console.log(fromRouter) //原先的路由
this.selectedPath = toRouter.path; // active高亮的參數對象
}
},