一、项目描述

通过Vue创建了一个前端项目，项目中导入了element-ui组件，项目中我创建了四个独立的vue界面（分别是：PageOne.vue、PageTwo.vue、PageThree.vue、PageFour.vue）；其次，使用element-ui创建了两个导航栏（其中包含四个页面：页面1、页面2、页面3、页面4）。需要实现的功能为：点击页面1、2、3、4，实现PageOne.vue到PageFour.vue的跳转。

项目结构如下：

二、通过menu和router的绑定实现上述功能

步骤如下：

• 1、在 el-menu 标签中加入router属性。

• 2、在页面中添加 router-view 标签，它是一个容器，可以动态渲染已经选择的 router 。

• 3、el-menu-item 标签中的 index 值就是要跳转的 router 。

修改之后的代码如下所示：

<el-menu router :default-openeds="['0', '1']">
          <el-submenu v-for="(item,index) in $router.options.routes" :index="index+''">
            <template slot="title"><i class="el-icon-message"></i>{{item.name}}</template>
            <el-menu-item v-for="(item2,index2) in item.children" :index="item2.path"
             :class="$route.path==item2.path?'is-active':''">{{item2.name}}</el-menu-item>
          </el-submenu>
</el-menu>

结果展示：

修改完成之后，点击边框栏中的页面1、2、3、4，就可以直接跳转到相应的页面，即完成了menu和router的绑定。。。