image.png
router->index.js中的如下代碼
import Vue from 'vue'
import store from '../store'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
// 主入口
import MainPage from '../views/MainPage.vue';
import Dad from '../views/Dad.vue';
import ChannelList from '../views/channelList.vue';
import ChannelOrder from '../views/channelOrder.vue';
import YearCardManage from '../views/yearCardManage.vue';
const routes = [
{
path: '/',
redirect: '/login'
},
{
path: '/mainPage',
component: MainPage,
redirect: '/channelOrder',
children: [
{
path: '/channelManage',
meta: {title: '渠道商管理'},
redirect: '/channelList',
component: Dad,
children: [
{
path: '/channelList',
name:'channelList',
meta: {title: '渠道商列表'},
component:ChannelList
},
{
path: '/channelOrder',
name:'channelOrder',
meta: {title: '渠道商訂單'},
component: ChannelOrder
},
],
},
{
path: '/yearCardManage',
name:"yearCardManage",
meta: {title: '年卡管理'},
component: YearCardManage
}
]
},
]
const router = new VueRouter({
routes: routes
})
// 掛載路由導(dǎo)航守衛(wèi)翰撑。每進(jìn)入到一個(gè)頁(yè)面就會(huì)調(diào)用
router.beforeEach((to, from, next) => {
console.log('xixixixhhhhhh---to',to,'----from---',from);
if (to.path === '/login') {
const cbUserName = window.localStorage.getItem("cbUserName");
if (!cbUserName) {
return next()// 沒(méi)有用戶名舔箭，去登錄頁(yè)面
}else{
return next('/mainPage')// 您已登錄乳蓄，去首頁(yè)吧
}
}else{
const cbUserId = store.state.cbUserId;
if(!cbUserId ){
return next('/login')
}
// 將本次訪問(wèn)的目的路徑存入緩存。
window.localStorage.setItem("activeLink", to.path);
}
next()
})
export default router
MainPage.vue中的如下代碼
<template>
<a-layout id="components-layout-demo-custom-trigger">
<a-layout-sider
:trigger="null"
collapsible
:style="{ overflow: 'auto', height: '100vh', position: 'fixed', left: 0 }"
>
<div style="height:20px;"></div>
<a-menu theme="dark" mode="inline" :selectedKeys="selectedKeys">
<template v-for="item in menuList">
<!-- 二級(jí)類(lèi)型的 -->
<a-sub-menu v-if="item.child" :key="item.path">
<div slot="title" style="display:flex;">
<span :class="item.icons" style="display:flex;margin-right:13px;">
</span>
<span>{{ item.title }}</span>
</div>
<a-menu-item
v-for="item2 in item.child"
:key="item2.path"
style="margin-left:4px;"
>
{{ item2.title }}
<router-link :to="item2.path"> </router-link>
</a-menu-item>
</a-sub-menu>
<!-- 一級(jí)類(lèi)型的 -->
<a-menu-item v-else :key="item.path">
<span :class="item.icons" style="margin-right:10px;"></span>
<span class="nav-text">{{ item.title }}</span>
<router-link :to="item.path"> </router-link>
</a-menu-item>
</template>
</a-menu>
</a-layout-sider>
</a-layout>
</template>
<script>
export default {
data() {
return {
selectedKeys: [],
menuList: [
{
title: "年卡管理",
path: "/yearCardManage",
icons: "iconfont icon-jingying",
child: null
},
{
title: "渠道商管理",
path: "/channelManage",
icons: "iconfont icon-qudao",
child: [
{
title: "渠道商列表",
path: "/channelList",
icons: null,
child: null
},
{
title: "渠道商訂單",
path: "/channelOrder",
icons: null,
child: null
}
]
}
]
};
},
watch: {
// 監(jiān)聽(tīng)路由變化聂宾。每次點(diǎn)擊菜單就會(huì)調(diào)用果善。
$route(to, from) {
// 將目的路徑賦值給selectedKeys，實(shí)現(xiàn)選中當(dāng)前菜單
this.selectedKeys = to.path.split(",");
}
},
mounted() {
// 刷新頁(yè)面就會(huì)調(diào)用系谐，獲取上次存入的菜單
var link = window.localStorage.getItem("activeLink");
// 選中菜單
this.selectedKeys = link.split(",");
}
};
</script>
由以上代碼分析巾陕，首先得知道router.beforeEach((to, from, next) => { })和$route(to,from) {}的異同：
- 相同點(diǎn)：
參數(shù)to和from打印的內(nèi)容是一樣的。 - 不同點(diǎn)：
由于兩個(gè)函數(shù)分別在不同的文件中纪他，決定了分別有不同的作用鄙煤。
前者作用：跳轉(zhuǎn)到任何一個(gè)頁(yè)面都會(huì)走該函數(shù)，該函數(shù)和菜單標(biāo)簽不在一個(gè)頁(yè)面茶袒，因此在該函數(shù)將目的路徑存入緩存最合適梯刚。
后者作用：點(diǎn)擊每個(gè)菜單都會(huì)走該函數(shù)。因?yàn)樵摵瘮?shù)和菜單標(biāo)簽在同一文件薪寓，因此將目的路徑賦值給菜單變量即可亡资，不用存入緩存澜共，當(dāng)做臨時(shí)變量使用。
-
1锥腻、router->index.js文件中的router.beforeEach((to, from, next) => { })函數(shù)里面寫(xiě)入window.localStorage.setItem("activeLink", to.path);實(shí)現(xiàn)存入緩存
2嗦董、MainPage.vue中的mounted() {}函數(shù)里面寫(xiě)入var link = window.localStorage.getItem("activeLink"); this.selectedKeys = link.split(",");實(shí)現(xiàn)獲取上次的菜單并選中。
-
MainPage.vue中寫(xiě)入如下代碼即可：
watch: {
// 監(jiān)聽(tīng)路由變化旷太。每次點(diǎn)擊菜單就會(huì)調(diào)用展懈。
$route(to, from) {
// 將目的路徑賦值給selectedKeys，實(shí)現(xiàn)選中當(dāng)前菜單
this.selectedKeys = to.path.split(",");
}
},
