vue-router(路由嵌套)
2023-09-14 09:07:25 时间
1、项目结构
2、路由嵌套
import Vue from 'vue'
import Router from 'vue-router'
import Main from '../views/Main'
import Login from '../views/Login'
import Information from '../views/user/Information'
import ListUser from '../views/user/List'
Vue.use(Router)
export default new Router({
routes: [
{
path:'/main',
component:Main,
children:[
{path:'/user/information',component:Information},
{path:'/user/list',component:ListUser}
]
},
{
path:'/login',
component:Login
}
]
})
3、界面(使用elementui)
<template>
<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>
</el-header>
<el-container>
<el-aside width="200px">
<el-menu :default-openeds="['1']">
<el-submenu index="1">
<template slot="title"><i class="el-icon-caret-right"></i>用户管理</template>
<el-menu-item-group>
<el-menu-item index="1-1">
<router-link to="/user/information">用户信息</router-link>
</el-menu-item>
<el-menu-item index="1-2">
<router-link to="/user/list">用户列表</router-link>
</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-submenu index="2">
<template slot="title"><i class="el-icon-caret-right"></i>内容管理</template>
<el-menu-item-group>
<el-menu-item index="1-1">
修改信息
</el-menu-item>
<el-menu-item index="1-2">
修改密码
</el-menu-item>
</el-menu-item-group>
</el-submenu>
</el-menu>
</el-aside>
<el-main>
<router-view/>
</el-main>
</el-container>
</el-container>
</template>
<script>
export default {
name: "Main"
}
</script>
<style scoped>
.el-dropdown-link {
cursor: pointer;
color: #409EFF;
}
.el-icon-arrow-down {
font-size: 12px;
}
.el-header, .el-footer {
background-color: #B3C0D1;
color: #333;
text-align: center;
line-height: 60px;
}
.el-aside {
background-color: #D3DCE6;
color: #333;
text-align: center;
line-height: 200px;
}
.el-main {
background-color: #E9EEF3;
color: #333;
text-align: center;
line-height: 160px;
}
body > .el-container {
margin-bottom: 40px;
}
.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
line-height: 260px;
}
.el-container:nth-child(7) .el-aside {
line-height: 320px;
}
</style>
4、效果展示
相关文章
- 用vue开发一个猫眼电影web app
- Vue - slot-scope="scope" 的意义
- Vue.js
- vue3: 动态修改favicon(网站的ico 图标)(vue@3.2.26)
- 从vue-cli2.x升级到@vue/cli 4.x(node v14.15.0 / vue.js 3.0)
- vue-cli4脚手架搭建实战教程
- vue获取当前路由
- 一文你带快速认识Vue-Router路由
- 【Jeecg Vue】通过getAction的finally来最大程度避免影响主数据呈现
- vue 页面刷新还在当前路由
- Vue学习之--------路由的query、params参数、路由命名(3)(2022/9/5)
- vue嵌套路由子路由 path 注意
- vue-route(三)后台管理路由配置
- vue-router(二)后代路由
- Vue前端路由
- 219:vue+openlayers 加载gif文件,采用CSS设置gif背景的方式
- 117:vue+openlayers: 实时显示zoom,并显示左下、左上、右上、右下的坐标 ( 示例代码 )
- 手把手使用 Webpack 4 建立 VUE 项目
- 【三十天精通Vue 3】第九天 Vue 3 路由详解
- vue实现点击后多级标题联动变化