vue项目通讯录_利用vue+vue-router+elementUI实现简易通讯录

Vue.use(VueRouter)

let myRouter= newVueRouter({

routes: [

{

path:'*',

component: ()=> import('../components/NotFoundComponent.vue')

},

{

path:'/',

redirect:'/contact'},

{

path:'/contact',

name:'Contact',

component: ()=> import('../components/contact/List.vue')

},

{

path:'/contact/edit',

name:'Contact',

component: ()=> import('../components/contact/Edit.vue')

},

{

path:'/account',

name:'Account',

component: ()=> import('../components/account/list.vue')

}

]

})

可以看到上面/contact和/contact/edit的name是相同的，这是为了让在新增或者编辑联系人页面下，还能让active状态停留在左侧我的联系人上，可以看到App.vue中的代码this.menuIndex = to.name就是进行的该操作，

虽然这样vue会报一个warn告诉我别重名[捂脸]，暂时能想到的就是这样的操作方式了，有考虑过依靠判断path来确定是否显示高亮状态，但是当目录层级较深且较复杂的情况下，这样就不是很靠谱了。

component这里为什么是这种形式，而不是直接用一个组件名呢，因为当路由开始多起来的时候，一下把所有的组件都加载进来会非常非常慢且会加载到许多当时并没有用到的组件，通过import这种形式࿰