VUe2.X 配合element 的踩坑及一些记录

element导航栏
el-menu-item 配合router-link 配置路由的时候，如果只是在el-menu-item内添加文字，则必须点击到文字，才能进行路由跳转。但是大部分用户，是更倾向点击文字所属的父级元素来进行路由切换。这就造成了用户体验不佳。而生硬地在文字外层加一个元素，即便设置宽、高100%，效果也并不理想。于是，使用官方后来给出的方法解决：

我们进行如下配置
第一步：配置路由，在store/index.js上配置路由，首先在上方使用import导入正确的相对路径
第二部：检查main.js上是否正确引入了index.js
第三步：在app.vue上使用‘< router-view ></ router-view >’标签，内容为空即可，否则无法成功跳转！
接下来进行配置操作：
其实官方为我们在el-menu上提供了一个router字段，我们还需要在el-menu上添加；:index-default=“this.$route.path”

element代码

	<el-menu :default-active="this.$route.path" class="el-menu-demo" mode="horizontal" @select="handleSelect"
      background-color="#545c64" text-color="#fff" active-text-color="#FF8800" router>
       <el-menu-item v-for="(item, index) in navList" :key="index" :index="item.name">
         {{item.navItem}}
       </el-menu-item>
     </el-menu>

路由列表

	navList:[
            {name:'/homepage',navItem:'首页'},
            {name:'/communityActivity',navItem:'项目案例'},
            {name:'/publishProject',navItem:'服务流程'},
            {name:'/feedback',navItem:'提交需求'},
            {name:'/consultation',navItem:'行业资讯'},
            {name:'/aboutus',navItem:'关于我们'},
        ]

路由配置信息

import Vue from 'vue'
import VueRouter from 'vue-router'
import homepage from '@/components/homepage/homepage.vue'
import aboutus from '@/components/aboutus/aboutus.vue'
import consultation from '@/components/consultation/consultation.vue'
import feedback from '@/components/feedback/feedback.vue'
Vue.use(VueRouter)

const routes = [
  {
    path: '*',
    name: 'homepage',
    component: homepage
  },
  {
    path: '/aboutus',
    name: 'aboutus',
    component: aboutus
  },
  {
    path: '/feedback',
    name: 'feedback',
    component: feedback
  },
  {
    path: '/consultation',
    name: 'consultation',
    component: consultation
  },
]

const router = new VueRouter({
  routes
})

export default router

即可完成。