the goal implements a navigation function
but refreshing the navigation under / about route will lose the highlight. The value of activeIndex is null
this problem will not exist if it is not loaded on demand and directly introduced into the About routing component
how to solve it, thank you
Nav.vue
<template>
<div>
<el-menu
:default-active="activeIndex"
class="el-menu-demo"
mode="horizontal"
background-color="-sharp545c64"
text-color="-sharpfff"
router
active-text-color="-sharpffd04b">
<el-menu-item index="/">Home</el-menu-item>
<el-menu-item index="about">About</el-menu-item>
</el-menu>
</div>
</template>
<script>
export default {
data: function () {
return {
activeIndex: this.$route.name
}
}
}
</script>router.js
import Vue from "vue"
import Router from "vue-router"
import Home from "./views/Home.vue"
Vue.use(Router)
export default new Router({
mode: "history",
routes: [
{
path: "/",
name: "home",
component: Home
},
{
path: "/about",
name: "about",
component: () => import(/* webpackChunkName: "about" */ "./views/About.vue")
}
]
})