SpringBoot + Vue 微人事项目(第三天)

左边导航菜单制作

element ui添加到Home 在这里插入图片描述
把侧栏的标签里面的代码拷贝到标签里面，显示效果如下左侧导航栏的效果代码

<el-aside width="200px"><el-menu><el-submenu index="1"><template slot="title"><i class="el-icon-location"></i><span>导航一</span></template><el-menu-item-group><el-menu-item index="1-1">选项1</el-menu-item><el-menu-item index="1-2">选项2</el-menu-item></el-menu-item-group></el-submenu></el-menu></el-aside>

删除一些代码效果
在这里插入图片描述
这两个选项点击是可以跳转到其他页面的，为了测试一个现在views文件夹里面新建两个vue组件，Test1.vue和Test2.vue，新建的vue组件不能直接跳转，还需要在router文件中的index.js文件里面导入才可以用

导航栏的点击事件
在这里插入图片描述
在标签里面添加 @select=“LeftMenu” ，然后再到methods方法里面去进行处理

              <el-aside width="200px"><el-menu @select="LeftMenu"><el-submenu index="1"><template slot="title"><i class="el-icon-location"></i><span>导航一</span></template><el-menu-item-group><el-menu-item index="/test1">选项1</el-menu-item><el-menu-item index="test2">选项2</el-menu-item></el-menu-item-group></el-submenu></el-menu></el-aside>

           LeftMenu(index,indexPath){console.log(index);console.log(indexPath);},

在这里插入图片描述
完善LeftMenu方法

            LeftMenu(index){this.$router.replace(index)},

完善该menuClick方法之后，浏览器效果如下：点击选项1,就直接跳转到test1的单独页面，选项2也是
在这里插入图片描述
这时有人会说直接把App.vue里面的复制粘贴到Home.vue页面的template模板的标签里面就行了

 <el-main><router-view/>
</el-main>

但是运行的效果还是会跳转到单独的test1和test2页面，其实解决方法也很容易
在这里插入图片描述

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../views/Login.vue'
import Home from '../views/Home.vue'
import Test1 from '../views/Test1.vue'
import Test2 from '../views/Test2.vue'Vue.use(VueRouter)const routes = [{path: '/',name: 'Login',component: Login},{path: '/home',name: 'Home',component: Home},{path: '/home',name: 'Home',component: Home,children:[{path: '/test1',name: 'Test1',component: Test1},{path: '/test2',name: 'Test2',component: Test2},]},
]const router = new VueRouter({routes
})export default router

还没完，还有一点小问题，新增一个页面要修改router.vue，还需要继续添加选项，这就有点麻烦

要把index.js里面的routers地址数组动态的渲染到左边的导航栏里面去

①在<el-submenu标签里面使用v-for进行遍历所有的routers地址，然后再使用v-if判断遍历后的带有hidden属性的地址需不需要隐藏起来

②在标签里面用v-for进行遍历所有的子地址

<el-aside width="200px"><el-menu @select="LeftMenu"><el-submenu :index="index" v-for="(item,index) in this.$router.options.routes" v-if="!item.hidden"><template slot="title"><i class="el-icon-location"></i><span>{{item.name}}</span></template><el-menu-item-group v-for="(child,index) in item.children" ><el-menu-item :key="index" :index=child.path>{{child.name}}</el-menu-item></el-menu-item-group></el-submenu></el-menu></el-aside>

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../views/Login.vue'
import Home from '../views/Home.vue'
import Test1 from '../views/Test1.vue'
import Test2 from '../views/Test2.vue'Vue.use(VueRouter)const routes = [{path: '/',name: 'Login',component: Login,hidden:true,},{path: '/home',name: 'Home',component: Home,hidden: true      //做个标记，然后在Home.vue里面进行判断},{path: '/home',name: '菜单管理',component: Home,children:[{path: '/test1',name: '用户管理',component: Test1},{path: '/test2',name: '权限管理',component: Test2},]},
]const router = new VueRouter({routes
})export default router