Spring Boot+Vue前后端分离开发06-----Vue开发指南（续2）

《Spring Boot+Vue前后端分离开发05-----Vue开发指南（续1）》一些补充

执行完上面步骤Spring Boot+Vue前后端分离开发05-----Vue开发指南（续1）之后，我们发现只有输入地址时才会生效，点击导航栏仍然无法切换，因此我们需要做如下改造，首先新增Index.vue，它用来绑定Index的路由以及导航栏

<template>
  <div class="index">
    <router-view></router-view>
  </div>
</template>

<script>

export default {
  name: 'Index',
  components: {

  }
}
</script>

接着修改router/index.js,重定义Index的路由

import Index from '../views/Index.vue'
const routes = [
    {
        path: '/',
        name: 'Index',
        component: Index,
        children:[
            {
                path: '/one',
                name: 'One',
                component: One
            },
            {
                path: '/two',
                name: 'Two',
                component: Two
            },
            {
                path: '/three',
                name: 'Three',
                component: Three
            }
        ]
    }
]

最后重写导航栏

<template>
    <div>
    <!--左侧菜单栏-->
      <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
        <el-menu :default-active="this.$router.path" router>
          <el-menu-item v-for="(item,i) in navList" :key="i" :index="item.name">
            {{ item.navItem }}
          </el-menu-item>
        </el-menu>
      </el-aside>
    </div>
</template>

<script>
    export default {
        data() {
        return {
                tableData: Array(20).fill(item),
                navList:[
                    {name:'/one',navItem:'One'},
                    {name:'/two',navItem:'Two'},
                    {name:'/three',navItem:'Three'}
                ]
            }

        }
    };
</script>

分别点击One、Two、Three就可以实现菜单切换了