13.0、veu-路由嵌套

在components文件夹下创建一个user文件夹在该文件夹下创建一个usermanager.vue用户信息管理组件。

usermanager.vue文件如下

<template><el-table:data="tableData"style="width: 100%"><el-table-columnprop="date"label="日期"width="180"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="address"label="地址"></el-table-column></el-table>
</template>
<script>
export default {data () {return {tableData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1517 弄'}]}}
}
</script>

Main.vue文件

<template>
<el-row class="tac"><el-col :span="12"><h5>默认颜色</h5><el-menudefault-active="2"class="el-menu-vertical-demo"@open="handleOpen"@close="handleClose"><el-submenu index="1"><template slot="title"><i class="el-icon-location"></i><span>导航一</span></template><el-menu-item-group><template slot="title">分组一</template><el-menu-item index="1-1"><router-link to="/user/manager">选项1</router-link></el-menu-item>
<!--          <el-menu-item index="1-1">选项1</el-menu-item>--><el-menu-item index="1-2">选项2</el-menu-item></el-menu-item-group><el-menu-item-group title="分组2"><el-menu-item index="1-3">选项3</el-menu-item></el-menu-item-group><el-submenu index="1-4"><template slot="title">选项4</template><el-menu-item index="1-4-1">选项1</el-menu-item></el-submenu></el-submenu><el-menu-item index="2"><i class="el-icon-menu"></i><span slot="title">导航二</span></el-menu-item><el-menu-item index="3" disabled><i class="el-icon-document"></i><span slot="title">导航三</span></el-menu-item><el-menu-item index="4"><i class="el-icon-setting"></i><span slot="title">导航四</span></el-menu-item></el-menu></el-col><router-view/>
</el-row>
</template>
<script>
export default {methods: {handleOpen (key, keyPath) {console.log(key, keyPath)},handleClose (key, keyPath) {console.log(key, keyPath)}}
}
</script>

Router路由文件夹下的

index.js文件

import Vue from 'vue'
import Router from 'vue-router'
import Main from '../components/Main'
import UserManager from '../components/user/UserManager'Vue.use(Router)export default new Router({routes: [{// 路由路径path: '/Main',name: 'Main',// 跳转的组件component: Main,children: [{path: '/user/manager', name: 'usermanager', component: UserManager}]}]
})

13.0、veu-路由嵌套相关推荐

Vue(小码哥王洪元)笔记06路由，url的hash，history，router-linke，路由跳转，动态路由，懒加载，路由嵌套，router参数传递，导航守卫
1.什么是路由路由器提供了两种机制:路由和传送路由:数据报从来源到目的地的路径传输:将输入端的数据转移到合适的输出端路由有一个非常重要的概念教路由表路由表本质上就是一个映射表,决定了数据包的 ...
Vue Router路由嵌套
路由嵌套分析点击父级路由链接显示模板内容模板内容中又有子级路由链接点击子级路由链接显示子级模板内容默认显示点击 hello链接显示本身的组件外,还显示了自身下的子组件嵌套路由用法父路由 ...
[AngularJS] “多重路由”嵌套模块——AngularJS“路由”嵌套学习资料教程
这是小编的一些学习资料,理论上只是为了自己以后学习需要的,但是还是需要认真对待的以下内容仅供参考,请慎重使用学习 1.AngularJS路由嵌套 Angularjs本身自带路由模块,可以满足通过不同 ...
028_vue路由嵌套
1. 嵌套路由功能分析 1.1. 点击父级路由链接显示模板内容. 1.2. 模板内容中又有子级路由链接. 1.3. 点击子级路由链接显示子级模板内容. 2. 嵌套路由用法 2.1. 父路由组件模板. ...
059——VUE中vue-router之路由嵌套在文章系统中的使用方法：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
Vue3（撩课学院）笔记07-vueRouter路由，创建路由，路由重定向，路由跳转，动态路由，路由懒加载，路由嵌套，路由参数穿传递的两种形式，通过事件来跳转路由
1.vueRouter路由的两种模式哈希模式:以#号分割,前端路由一般用hash模式比较多,可以兼容ie8以上,井号后面不发起请求历史模式:putstate()和replaceState()方法入 ...
Apache Flink 1.13.0 发布公告
Apache Flink 社区很高兴宣布 Flink 1.13.0 的发布!200 多个贡献者为这个新版本处理了 1000 多个问题. 该版本使我们迈出了一大步:将流处理应用程序变得与其他任何应用程序 ...
Ubuntu 14.04 64位上安装Valgrind 3.13.0 操作步骤
关于Valgrind的介绍和使用可以参考: http://blog.csdn.net/fengbingchun/article/details/50196189 在Ubuntu 14.04上可以通过以 ...
Asp.Net MVC2.0 Url 路由入门---实例篇
本篇主要讲述Routing组件的作用,以及举几个实例来学习Asp.Net MVC2.0 Url路由技术. 接着上一篇开始讲,我们在Global.asax中注册一条路由后,我们的请求是怎么转到相应的Vi ...
「biáng biáng 面」马上可以打出来了！Unicode发布13.0版本，收录4939个生僻字
点击上方"AI遇见机器学习",选择"星标"公众号重磅干货,第一时间送达十三发自凹非寺量子位报道 | 公众号 QbitAI 有一种面条,很多人吃过,但 ...

13.0、veu-路由嵌套

13.0、veu-路由嵌套

13.0、veu-路由嵌套相关推荐

最新文章

热门文章