```javascript
const routes = [
{
path: '/',
name: 'Home',
meta:{
isLogin:true // 添加该字段,表示进入这个路由是需要登录的
},//路由元
redirect:"/home/quotation",
children:[
{
path: '/home/quotation',
name: 'quotation',
component: () => import('../views/User/Quotation.vue')
},
{
path: '/home/ecpsystem',
name: 'ecpsystem',
component: () => import('../views/User/Ecpsystem.vue')
},
{
path: '/home/limitstration',
name: 'Limitstration',
component: () => import('../views/User/Limitstration.vue')
},
{
path: '/home/rolestration',
name: 'Rolestration',
component: () => import('../views/User/Rolestration.vue')
},
{
path: '/home/userstration',
name: 'Userstration',
component: () => import('../views/User/Userstration.vue')
},
],
component: Home
},
{
path: '/about',
name: 'About',
component: () => import('../views/About.vue')
},
{
path: '/login',
name: 'login',
component: () => import('../views/Login.vue')
},
]```
需要在需要二级路由的页面定义孩子children数组,数组里面是想对应的路由,在相应的路径下建立各个路由所需模块
<!-- -->
<template>
<div class="home">
<el-container style="height: 750px; border: 1px solid #eee">
<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
<el-menu :default-openeds="['1', '2']">
<el-submenu index="1">
<template slot="title"><i class="el-icon-message"></i>数据导出</template>
<el-menu-item-group>
<el-menu-item index="1-1">
<router-link to="/home/quotation">报价系统</router-link>
</el-menu-item>
<el-menu-item index="1-2">
<router-link to="/home/ecpsystem">ECP系统</router-link>
</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-submenu index="2">
<template slot="title"><i class="el-icon-menu"></i>权限管理</template>
<el-menu-item-group>
<el-menu-item index="2-1">
<router-link to="/home/userstration">用户管理</router-link>
</el-menu-item>
<el-menu-item index="2-2">
<router-link to="/home/rolestration">角色管理</router-link>
</el-menu-item>
<el-menu-item index="2-2">
<router-link to="/home/limitstration">权限管理</router-link>
</el-menu-item>
</el-menu-item-group>
</el-submenu>
</el-menu>
</el-aside>
<el-container>
<el-header style="text-align: right; font-size: 12px">
<span>用户名:{{ this.$store.state.name }}</span>
</el-header>
<el-main>
<router-view />
</el-main>
</el-container>
</el-container>
</div>
</template>
<script>
export default {
components: {},
data() {
const item = {
name: "王小虎",
};
return {};
},
//监听属性 类似于data概念
computed: {},
//方法集合
methods: {},
//生命周期 - 挂载完成(可以访问DOM元素)
mounted() {},
//生命周期 - 创建完成(可以访问当前this实例)
created() {},
};
</script>
<style lang="less" scoped>
.el-header {
background-color: #b3c0d1;
color: #333;
line-height: 60px;
}
.el-aside {
color: #333;
}
.home {
height: 100%;
}
</style>
然后需要点击的文字用router-link标签包裹,属性to是跳转的路由,
组件支持用户在具有路由功能的应用中(点击)导航。 通过 to 属性指定目标地址,默认渲染成带有正确链接的 标签,可以通过配置 tag 属性生成别的标签.。另外,当目标路由成功激活时,链接元素自动设置一个表示激活的 CSS 类名。