vue.js嵌套路由-------由浅入深
嵌套路由就是路由里面嵌套他的子路由
子路由关键属性children
每一个子路由里面可以嵌套多个组件
子组件又有路由导航和路由容器
<router-link to="/父路由的地址名字/要去的子路由的名字"></router-link>
下面实例讲解
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body> <div id="app"><router-link to="/green" tag="li">green</router-link><router-link to="/fruit" tag="li">fruit</router-link> <router-view></router-view> </div> <template id="green"> <div>蔬菜<router-link to="/green/organic">有机</router-link><router-link to="/green/inorganic">无机</router-link><router-view></router-view> </div> </template> <template id="fruit"> <div>水果<router-link to="/fruit/sweet">甜的</router-link><router-link to="/fruit/acid">酸的</router-link><router-view></router-view> </div> </template> </body> <script src="node_modules/vue/dist/vue.js"></script> <script src="node_modules/vue-router/dist/vue-router.js"></script> <script>//父路由 有蔬菜,水果,蔬菜里面有有机蔬菜,无机蔬菜 ,水果里面有甜的酸的 let green={template:'#green'}let organic={template:"<div>有机蔬菜organic</div>"}let inorganic={template:"<div>无机蔬菜inorganic</div>"}let fruit={template:'#fruit'}let sweet={template:"<div>甜的</div>"}let acid={template:"<div>酸的</div>"}//路由路径映射表 let routes=[//路由默认去的第一个组件 {path:'',component:green},{path:"/green",component:green,children:[{path:"",component:organic},{path:"organic",component:organic},{path:"inorganic",component:inorganic}]},{path:"/fruit",component:fruit,children:[{path:"",component:sweet},{path:"sweet",component:sweet},{path:"acid",component:acid}]},//所有没有找到时候,去地址/green的组件 {path:"*",redirect:'/green'}]//实例化一个路由 let router=new VueRouter({routes})let vm=new Vue({el:"#app",data:{},router}) </script> </html>
转载于:https://www.cnblogs.com/null11/p/7486735.html
vue.js嵌套路由-------由浅入深相关推荐
- vue.js嵌套路由
文章目录 vue.js嵌套路由,如何使用? 总结说明: 效果图预览: 相关文件代码: 1. ```main.js```文件 2. ```app.vue```文件 3. ```header.vue``` ...
- vue 刷新嵌套路由_vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法...
解决vue-router嵌套路由(子路由)在history模式下刷新无法渲染页面的问题,具体内容如下 一. 异常描述 本来使用的是vue-router的hash模式,但是hash模式下url需要带&q ...
- angular.js 嵌套路由
介绍 AngularJS 嵌套路由:,来看看嵌套的ui-router状态是怎么回事. ui-router和同属AngularJS框架一部分的ng-route一样强大. ui-router提供了让我们可 ...
- vue.js 二级路由/三级路由
为什么要用二级和三级路由? 当项目中 有多个 <router-view> 时,就必须使用分级路由: 如果路由不分级,又有多个 <router-view> ,全部都是定义为一级路 ...
- elementui 搭建布局页面路由_【项目实践】使用Vue.js和ElementUI快速实现后台管理系统的界面布局...
前言 大家都知道,后台管理界面不需要很酷炫的动画效果,也不需要花里胡哨的界面布局,只需要简洁易用.清爽明了的界面以便于管理数据.而现在普遍的后台管理系统的界面布局都差不多,上中下结构,然后左边是导航栏 ...
- Vue第二部分(4): 嵌套路由和路由传参
嵌套路由 实际生活中的应用界面,通常由多层嵌套的组件组合而成.当我们路由到某一个组件后,还经常需要在该组件中继续路由到其子组件,这就需要使用Vue的嵌套路由.比如:当我们路由到登录组件后,又分为手机验 ...
- vue-router和react-router嵌套路由layout配置方案的区别
最近在学习react,在路由这一块有点看不懂,第一感觉是灵活性很大,想怎么来就怎么来,但问题也来了,稍微复杂一点就GG了,不如vue的傻瓜式配置来的方便. 先说一下vue的路由配置方式,目录结构如下( ...
- Vue.js快速入门+项目实战(源码)
Vue.js电影网站项目 github 链接(如果觉得有用记得start哦~): 项目源代码链接 目录 前言 安装 Vue.js 1.Vue.js主要特性 2.Vue.js实例 3.Vue.js路由 ...
- 【项目实践】使用Vue.js和ElementUI快速实现后台管理系统的界面布局
前言 大家都知道,后台管理界面不需要很酷炫的动画效果,也不需要花里胡哨的界面布局,只需要简洁易用.清爽明了的界面以便于管理数据.而现在普遍的后台管理系统的界面布局都差不多,上中下结构,然后左边是导航栏 ...
最新文章
- C#拾遗系列(3):构造函数
- Android启动过程深入解析【转】
- Struts值栈与Ognl
- Linux小实验——设备挂载、磁盘分区、格式化、RAID的配置、LVM配置、磁盘配额的配置方法和验证
- 研究生导师一般希望招什么样的研究生?
- 【李宏毅2020 ML/DL】补充:Meta Learning - Gradient Descent as LSTM
- pb 哪里找到系统图标_建议收藏的7个高质量图标网站,一网打尽图标素材
- python列表添加字符串_python字符串和列表操作
- Cognos组织架构介绍
- java前后端开发文档汇总
- 数学建模思路模板经典案例(看完快速入门)
- preg_match用法
- 阿里云控制台配置OSS服务
- AH快递单打印管理软件
- 深入了解 JavaScript 内存泄露
- 【长按图片识别】uniapp vue开发时,点击图片识别—实现转发、收藏、识别图片二维码
- Execl操作基础——自动填充空白单元格
- pytorch中的value, top = prob.topk(1, dim=1, largest=True, sorted=True)
- QT学习笔记-第三天
- 利用Python自动爬取全国30+城市地铁图数据
热门文章
- 2017年对口招生c语言及答案,2017年计算机专业对口考试试卷及答案.doc
- 精通开关电源设计第二版pdf_11、秋招年35月准备期——Verilog HDL高级数字设计(第二版)...
- 修改matlab的工作路径(图解版)
- SWIFT调用C语言
- java utf8 简繁转换 类库_Java封装简体繁体(香港台湾)转换工具
- iscsi:IO操作流程(一)
- php 修改 apk名称6,反编译sencha toucha打包的apk文件,修改应用名称支持中文以及去除应用标题栏...
- ubuntu python3 mysql_ubuntu14.04 python3.*连接mysql
- mysql 比较一个字符串_比较MySQL中的两个字符串?
- c语言 原码反码和补码