First, the scene: after a page refresh, still located before the menu bar to select the button, the button before the menu bar is still active, rather than re-locate to the first default activation status of the menu bar button.
Second, the 1, the element-ui component library, there is a name for the component NavMenu navigation menu, <el-menu> has an attribute default-active label, which value indicates the component routing menu button corresponding to the currently activated, and this property can be removed, but after refresh the page menu bar button becomes activated first, with page refreshes after the property is still before the menu button is highlighted.
2, the menu bar button a lot, so the value of default-active is not static, here to give a js object to the logic of dynamic objects assigned to the current component of the route that each time you refresh the page by default after activating the button corresponding still a component corresponding to the current route.
3, default-active = "activeMenu" // name can easily take
Initialization data 4, data () {// page
return {
activeMenu: '/ Home / index', // value home component routing, this is fixed, when a route is changed, to change the value of the current routing activeMenu .
}
}
5, watch: {// Route monitoring: monitor changes in the route, in order to make the appropriate action
$ route: {
load immediate: to true, // listen for once to change the route of the immediate execution
handler (to, from) {// callback function, two parameters, to: the current component, from: a component on
this.activeMenu = to.path activeMenu routing address @ to reassign current component
}
}
}
Third, review the routing infrastructure:
1 , route: it is a route, display different content depending on the address
2 , routes: it is a set of route
3 , Router: is a mechanism to manage routing