1.注意事項
01.路由中使用了keepAlive屬性,要用keepAlive:true,不能等于false,使用false頁面會刷新
2.使用的方法
NavMenu 導航菜單
文章來源:http://www.zghlxwxcb.cn/news/detail-695622.html
3.項目實例
<template>
<div class="policy-home">
<div class="policyNav">
<el-menu :default-active="activeIndex"
background-color="#486DC0"
text-color="#FFFFFF"
active-text-color="#FFF000"
class="el-menu-demo"
mode="horizontal"
:router="true">
<el-menu-item index="/policyjisuan">政策計算器</el-menu-item>
<el-menu-item index="/searchP">檢索</el-menu-item>
<el-menu-item index="/policyStoreGraphic">政策圖解</el-menu-item>
<el-menu-item index="/applyNews">今日申報</el-menu-item>
<el-menu-item index="/original">政策原文</el-menu-item>
</el-menu>
</div>
<div class="navContent">
<router-view></router-view>
</div>
</div>
</template>
<script>
export default {
data() {
return {
activeIndex: '/policyjisuan',
};
},
watch: {
// 監(jiān)聽路由變化
'$route.path': {
handler (routePath) {
this.initMenuActive(routePath)
},
immediate: true
}
},
methods: {
initMenuActive (routePath) {
//路由跳轉時,標記在導航的哪個選項下對應的路由,css高亮顯示
if (routePath == '/loginPolicy') {
this.activeIndex = '/policyjisuan'
} else if(routePath == '/searchDetail'){
this.activeIndex = '/searchP'
} else if(routePath == '/applyDetail'){
this.activeIndex = '/applyNews'
} else if(routePath == '/calculateDetail'){
this.activeIndex = '/policyjisuan'
} else if(routePath == '/companyDetail'){
this.activeIndex = '/policyjisuan'
} else if(routePath == '/originalDetail'){
this.activeIndex = '/original'
} else {
this.activeIndex = routePath
}
},
}
}
</script>
<style lang="scss" scoped>
/* 導航下頁面 */
.navContent {
min-height: 800px;
padding-bottom: 70px;
background-color: #fff;
}
.policyNav {
.el-menu-item {
text-align: center;
border-bottom: none;
width: 16%;
font-size: 22px;
font-weight: 500;
background-color: #486DC0 !important;
}
.el-menu {
background-color: #486DC0 !important;
}
}
</style>
路由配置文章來源地址http://www.zghlxwxcb.cn/news/detail-695622.html
js文件
export default [
{
path: '/policyStoreIndex',
name: '政策計算器導航頁',
redirect: '/policyjisuan',
component: () =>
import(/* webpackChunkName: "page" */ '@/views/home/policyStoreIndex'),
meta: {
keepAlive: true,
isTab: false,
isAuth: false
},
children: [
{
path: '/searchP',
name: '檢索',
component: () =>
import(/* webpackChunkName: "page" */ '@/views/home/policyStoreNew/searchP'),
meta: {
keepAlive: true,
isTab: false,
isAuth: false
}
}]
}
]
到了這里,關于使用element-ui導航,進入對應的三級頁面菜單保持點擊狀態(tài)的文章就介紹完了。如果您還想了解更多內容,請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章,希望大家以后多多支持TOY模板網!