element ui框架（嵌套路由）

您所在的位置：网站首页 › element菜单导航路由 › element ui框架（嵌套路由）

element ui框架（嵌套路由）

2024-06-12 08:26| 来源: 网络整理| 查看: 265

实际项目中，很多应用都是单页面应用。也就是说，在输入用户名和密码之后，用户只需要进入一个页面就可以完成所有的操作。当然，说是单页面应用，不同的功能还是需要子路由来实现的。这就是本文要说的嵌套路由。

前面几节已经完成了基本的网页输出，今天可以通过修改Main.vue的方法来进一步实现嵌套路由。

1、修改Main.vue

会员管理会员等级会员列表商品管理商品分类商品列表用户中心退出登录 admin export default { name: "Main" } .el-header { background-color: #B3C0D1; color: #333; line-height: 60px; } .el-aside { color: #333; }

上面的代码略多，主要是三个地方做了修改。第一，添加了基于容器的页面布局。这部分内容可以直接参考element ui给出的示例代码，地址在这，https://element.eleme.cn/#/zh-CN/component/container。第二，将之前el-main的内容修改为router-view，因为这部分的内容是由不同的子路由提供的，绝对不能写死。第三，通过router-link增加两个超链接，一个是/Member/Level，一个是/Member/List，这也是后面需要添加的子网页。

2、添加两个子网页MemberLevel.vue和MemberList.vue

2.1 MemberLevel.vue代码

会员等级 export default { name:"MemberLevel" }

2.2 MemberList.vue代码

会员列表 export default { name:"MemberList" }

上面两个网页都是新增的，文件和Login.vue、Main.vue一样，保存在view目录下面即可。

3、修改路由文件router/index.js

import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' import Login from '@/view/Login' import Main from '@/view/Main' import MemberLevel from '@/view/MemberLevel' import MemberList from '@/view/MemberList' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'HelloWorld', component: HelloWorld }, { path: '/Login', name: 'Login', component: Login }, { path: '/Main', name: 'Main', component: Main, children :[ { path: '/Member/Level', name:'MemberLevel', component: MemberLevel }, { path: '/Member/List', name:'MemberList', component: MemberList } ] } ] })

和前面几种路由不同，这里新增的路由是子路由，因此必须放在Main的children下面。具体的内容和外面一致，还是path、name、component这三种。

4、实验测试

可以直接输入127.0.0.1:8082/Main，不出意外可以看到相关的网页。网页中的超链接也是可以打开的。

【本文地址】

element ui框架（嵌套路由）

element ui框架（嵌套路由）

今日新闻

推荐新闻