Scene description:There are top navigation and left navigation in the page. The left navigation and right content area are implemented using named views. When clicking on the link to the left navigation, the right content area displays the content content of different components accordingly. Problem: Manually refresh the browser at the current link (for example: the browser address is /enterprise/list), and the top navigation activation item is restored to the initial state (the default is the "workbench" item).
principle:Vue will be instantiated every time it is refreshed, which means the created method will be called.
<template>
<el-menu :default-active="defaultActiveIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" :router="true">
<el-menu-item index="/">Workbench</el-menu-item>
<el-menu-item index="/enterpriseManager">Business Management</el-menu-item>
<el-menu-item index="/orderManager">Order Management</el-menu-item>
<el-menu-item index="/systemManager">System Management</el-menu-item>
</el-menu>
</template>
<script>
export default {
name: 'app',
data () {
return {
defaultActiveIndex: "/"
}
},
created() {
// Get data after the component is created. // At this time, data has been observed ()
},
methods: {
handleSelect(index){
= index;
},
jumpTo(url){
= url;
this.$(url); //Refresh with go },
fetchData () {
var cur_path = this.$; //Get the current route var routers = this.$; // Get the routing object var nav_type = "";
for(var i=0; i<; i++){
var children = routers[i].children;
if(children){
for(var j=0; j<; j++){
var grand_children = children[j].children;
if(grand_children){
for(var k=0; k<grand_children.length; k++){
if(grand_children[k].path == cur_path){
nav_type = routers[i].type;
break;
}
}
}
}
}
}
if(nav_type == "home"){
= "/";
} else if(nav_type == "enterprise"){
= "/enterpriseManager";
}
}
}
watch: {
'$route': 'fetchData'
}
}
</script>
Attached router configuration format:
export default [
{
path: '/',
type: 'home', //Custom type distinguishes between different module menus name: 'home',
redirect: '/dashboard',
component: Home,
menuShow: true,
children: [
{
path: '/dashboard',
component: HomeNav,
name: 'dashboard',
leaf: true, // There is only one node iconCls: 'icon-home', //Icon style class menuShow: true,
children: [
{ path: '/dashboard', component: Dashboard, name: 'front page', menuShow: true }
]
},
{
path: '/mySet',
component: HomeNav,
name: 'My settings',
iconCls: 'el-icon-menu',
menuShow: true,
children: [
{ path: '/mySet/plan', component: Plan, name: 'Itinerary plan', menuShow: true },
{ path: '/mySet/maillist', component: Maillist, name: 'Address Book', menuShow: true }
]
}
]
},
{
path: '/enterpriseManager',
type: 'enterprise',
name: 'enterprise',
component: Home,
redirect: '/enterprise/list',
menuShow: true,
children: [
{
path: '/enterpriseList',
component: EnterpriseNav,
name: 'enterpriseList',
leaf: true, // There is only one node iconCls: 'icon-home', //Icon style class menuShow: true,
children: [
{ path: '/enterprise/list', component: EnterpriseList, name: 'Company List', menuShow: true }
]
},
{
path: '/enterpriseAdd',
component: EnterpriseNav,
name: 'enterpriseAdd',
leaf: true, // There is only one node iconCls: 'el-icon-menu',
menuShow: true,
children: [
{ path: '/enterprise/add', component: EnterpriseAdd, name: 'Company Add', menuShow: true }
]
},
{
path: '/enterpriseValidate',
component: EnterpriseNav,
name: 'enterpriseValidate',
leaf: true, // There is only one node iconCls: 'el-icon-menu',
menuShow: true,
children: [
{ path: '/enterprise/validate', component: EnterpriseValidate, name: 'Corporate Certification', menuShow: true }
]
}
]
}
]
Supplementary knowledge:vue manually refresh the view and other minor issues
Recently, I used vue+elementUI to rewrite a page written in various components on my hand using angularJS+jquery. It was so silky, recording some small problems with vue and elementUI.
1. If the data structure in vue is large, it is very likely that model will be updated without the view being updated/the model and the view are not updated without error. At this time, you need to manually refresh the vue data. In the change or click event, use this.$forceUpdate() to manually refresh the view.
//Like this changeSef: function () {
//Refresh the view manually var that = this;
that.$forceUpdate();
},
2. Use setTimeout in vue
//Error DemonstrationsetTimeout(bidOrderInit, 200);
//The above is not possible. I checked it online and roughly said that this points to the window object in setTimeout.//So the timed method cannot use this object of vue//Correct demonstration//You can ignore support for iesetTimeout(()=> {
();
}, 200);
// When compatible with ie is requiredsetTimeout(function () {
();
}, 200);
The above Vue page is manually refreshed to restore the navigation bar activation item to its initial state. This is all the content I share with you. I hope you can give you a reference and I hope you can support me more.