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-router(路由嵌套)的更多相关文章

  1. 前端MVC Vue2学习总结(八)——Vue Router路由、Vuex状态管理、Element-UI

    一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI双色球129期开奖结果 ,手机端有对应双色球129期开奖结果 是 Mint U ...

  2. vue学习路由嵌套

    1. 路由嵌套和参数传递 传参的两种形式: a.查询字符串:login?name=tom&pwd=123 {{$route.query}} ------ <li><route ...

  3. Vue系列:Vue Router 路由梳理

    Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌.包含的功能有: 嵌套的路由/视图表 模块化的.基于组件的路由配置 路由参数. ...

  4. 04 Vue Router路由管理器

    路由的基本概念与原理 Vue Router Vue Router (官网: //router.vuejs.org/zh/)是Vue.js 官方的路由管理器. 它和vue.js的核心深度集成 ...

  5. Vue Router路由管理器介绍

    参考博客://www.cnblogs.com/avon/p/5943008.html 安装介绍:Vue Router 版本说明 对于 TypeScript 用户来说,vue-router@ ...

  6. vue.js路由嵌套

    <!DOCTYPE html> <html> <head> <title></title> <meta charset="u ...

  7. Vue Router 路由守卫:完整的导航解析流程

    完整的导航解析流程 1 导航被触发. 2 在失活的组件里调用离开守卫. 3 调用全局的 beforeEach 守卫. 4 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+). ...

  8. Vue Router路由守卫妙用:异步获取数据成功后再进行路由跳转并传递数据,失败则不进行跳转

    问题引入 试想这样一个业务场景: 在用户输入数据,点击提交按钮后,这时发起了ajax请求,如果请求成功, 则跳转到详情页面并展示详情数据,失败则不跳转到详情页面,只是在当前页面给出错误消息. 难点所在 ...

  9. vue 多级路由嵌套后打开页面是空白

    在多层路由嵌套时,一级子目录必须有一个页面并且添加一具<router-view>,否则路由跳转页面为空,没有任何显示 来自为知笔记(Wiz)

  10. Vue Router 路由实现原理

    一.概念 通过改变 URL,在不重新请求页面的情况下,更新页面视图. 二.实现方式 更新视图但不重新请求页面,是前端路由原理的核心之一,目前在浏览器环境中这一功能的实现主要有2种方式: 1.Hash  ...

随机推荐

  1. 最新30系显卡搭建paddle飞浆环境|含CUDA下载安装

    下载CUDA 通过这个链接可以下载任意CUDA版本:CUDA Toolkit Archive | NVIDIA Developer 我下载的是这一个://developer.downloa ...

  2. Spring源码 13 IOC refresh方法8

    本文章基于 Spring 5.3.15 Spring IOC 的核心是 AbstractApplicationContext 的 refresh 方法. 其中一共有 13 个主要方法,这里分析第 8 ...

  3. 【ARK UI】HarmonyOS ETS如何创建PixeMap并显示Image组件上

    ​参考资料 图片处理 Context模块 api讲解 image.createPixelMap createPixelMap(number: fd, options: InitializationOp ...

  4. KubeEdge:下一代云原生边缘设备管理标准DMI的设计与实现

    摘要:KubeEdge设备管理架构的设计实现,有效帮助用户处理设备数字孪生双色球 中遇到的场景. 本文分享自华为云社区<KubeEdge:下一代云原生边缘设备管理标准DMI的设计与实现>. 随 ...

  5. C#基础_类的声明

    新建Clerk类. using System; using System.Collections.Generic; using System.Linq; using System.Text; usin ...

  6. Python入门系列(七)开发常说的“累”与“对象”

    类与对象 Python是一种面向对象的编程语言. 要创建类,请使用关键字class class MyClass: x = 5 创建一个名为p1的对象,并打印x的值 p1 = MyClass() pri ...

  7. 【Oracle初学者】ORA-01034: ORACLE not available

    系统报错代码 ORA-01034: ORACLE not available 出现原因 //在启动实例时,关闭了数据库,导致外部软件无法访问Oracle数据库(大部分都是因为数据库监听或者服务关闭导致 ...

  8. KingbaseES timestamp 和 timestamptz 差异比较

    KingbaseES 提供两种存储时间戳的数据类型: 不带时区的 TIMESTAMP 和带时区的 TIMESTAMPTZ. TIMESTAMP 数据类型可以同时存储日期和时间,但它不存储时区.这意味着 ...

  9. KingabseES 锁机制

    KingabseES的锁机制 目录 KingabseES的锁机制 一.前言 二.锁机制 三.表级锁 ( Table-Level Locks ) 1.访问共享(ACCESS SHARE) 2.行共享(R ...

  10. 选择排序C语言版本

    算法思路,从头至尾扫描序列. 首先从第二个到最后,找出最小的一个元素,和第一个元素交换: 接着从第三个到最后,后面找出最小的一个元素,和第二个元素交换: 依次类推最终得到一个有序序列. void Se ...