Page refresh will initialize the data in data. How to solve this problem?
I tried to execute this.activeIndex = this.$route.name
in the mounted function, but router was loaded on demand and could not get $route
I tried to monitor the route again, but it didn"t work
watch: {
"$route" (to, from){
console.log(to);
this.activeIndex = to.name
}
} <el-menu
:default-active="activeIndex"
class="el-menu-demo"
mode="horizontal"
@select="handleSelect"
active-text-color="-sharp23b8ff"
router
>
<el-menu-item index="/"></el-menu-item>
<el-menu-item index="publicClass"></el-menu-item>
<el-menu-item index="specialClass"></el-menu-item>
<el-menu-item index="me"></el-menu-item>
</el-menu>export default {
data() {
return {
activeIndex: "/"
};
},
methods: {
handleSelect(key, keyPath) {
}
}
}router.js
import Vue from "vue"
import Router from "vue-router"
import Home from "@/views/Home/Index.vue"
Vue.use(Router)
export default new Router({
mode: "history",
base: process.env.BASE_URL,
routes: [
{
path: "/",
name: "home",
component: Home
},
{
path: "/publicClass",
name: "publicClass",
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ "@/views/PublicClass/Index.vue")
}
]
})