【 声明:版权所有,欢迎转载,请勿用于商业用途。 联系信箱:feixiaoxing @163.com】
实际项目中,很多应用都是单页面应用。也就是说,在输入用户名和密码之后,用户只需要进入一个页面就可以完成所有的操作。当然,说是单页面应用,不同的功能还是需要子路由来实现的。这就是本文要说的嵌套路由。
前面几节已经完成了基本的网页输出,今天可以通过修改Main.vue的方法来进一步实现嵌套路由。
1、修改Main.vue
- <template>
- <div>
- <el-container>
- <el-aside width="200px">
- <el-menu :default-openeds="['1']">
- <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="/Member/Level">会员等级</router-link>
- </el-menu-item>
- <el-menu-item index="1-2">
- <router-link to="/Member/List">会员列表</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">商品分类</el-menu-item>
- <el-menu-item index="2-2">商品列表</el-menu-item>
- </el-menu-item-group>
- </el-submenu>
- </el-menu>
- </el-aside>
-
- <el-container>
- <el-header style="text-align: right; font-size: 12px">
- <el-dropdown>
- <i class="el-icon-setting" style="margin-right: 15px"></i>
- <el-dropdown-menu slot="dropdown">
- <el-dropdown-item>用户中心</el-dropdown-item>
- <el-dropdown-item>退出登录</el-dropdown-item>
- </el-dropdown-menu>
- </el-dropdown>
- <span>admin</span>
- </el-header>
-
- <el-main>
- <router-view/>
- </el-main>
- </el-container>
- </el-container>
- </div>
- </template>
-
- <script>
-
- export default {
- name: "Main"
- }
-
- </script>
-
- <style scoped>
- .el-header {
- background-color: #B3C0D1;
- color: #333;
- line-height: 60px;
- }
-
- .el-aside {
- color: #333;
- }
- </style>
上面的代码略多,主要是三个地方做了修改。第一,添加了基于容器的页面布局。这部分内容可以直接参考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代码
- <template>
- <div>会员等级</div>
- </template>
-
- <script>
- export default {
- name:"MemberLevel"
- }
-
- </script>
-
- <style>
- </style>
2.2 MemberList.vue代码
- <template>
- <div>会员列表</div>
- </template>
-
- <script>
- export default {
- name:"MemberList"
- }
-
- </script>
-
- <style>
- </style>
上面两个网页都是新增的,文件和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,不出意外可以看到相关的网页。网页中的超链接也是可以打开的。