VUE多层路由嵌套实现代码


Posted in Javascript onMay 15, 2017

本文实例为大家分享了VUE多层路由嵌套的具体代码,供大家参考,具体内容如下

先看看效果图:

VUE多层路由嵌套实现代码

例如:在做系统时,主页面有两个功能【home】and【news】,在【home】下又分为登录和注册。

首先需要将各种模板进行抽离。定义模板

<template id="home"> //home模板,里面含子视口
 <div>
 <router-link to="/home/login">登录</router-link>
 <router-link to="/home/zhuce">注册</router-link>

 <router-view></router-view>
 </div>
</template>
<template id="news"> //消息模板
 <div>news</div>
</template>
<template id="login"> //home模板下的登录
 <div>this is login</div>
</template>

<template id="zhuce"> //home模板下的注册
 <div>this is zhuce</div>
</template>

JS下配置路由

const home={template:"#home"};
 const news={template:'#news'};
 const login={template:'#login'};
 const zhuce={template:'#zhuce'};

 var rout=[
 {path:'/',redirect:'/home'}, //重定向为home ,当html后面哈希值为空时,默认显示home
 {
 path:'/home',
 component:home, //模板注册
 redirect:'/home/login',//子视口的重定向 默认登录
 children:[
  {path:'/home/login',component:login}, //配置子模板
  {path:'/home/zhuce',component:zhuce}
 ]},
 {path:'/news',component:news}
 ];

 var router=new VueRouter({ //实例化一个vuerouter
 routes:rout
 });

 const app = new Vue({
 router
 }).$mount('#app')

当Vue实例没有el属性时,则该实例尚没有挂载到某个dom中;

假如需要延迟挂载,可以在之后手动调用vm.$mount()方法来挂载。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jQuery的倒计时插件代码
May 07 Javascript
基于jquery实现导航菜单高亮显示(两种方法)
Aug 23 Javascript
jQuery的Ajax用户认证和注册技术实例教程(附demo源码)
Dec 08 Javascript
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
Jun 01 jQuery
JS如何设置元素样式的方法示例
Aug 28 Javascript
JS运动特效之完美运动框架实例分析
Jan 24 Javascript
微信小程序实现长按删除图片的示例
May 18 Javascript
vue axios整合使用全攻略
May 24 Javascript
JS实现仿微信支付弹窗功能
Jun 25 Javascript
详解如何在Angular优雅编写HTTP请求
Dec 05 Javascript
解决vue移动端适配问题
Dec 12 Javascript
element实现合并单元格通用方法
Nov 13 Javascript
JavaScript制作简单的框选图表
May 15 #Javascript
vue.js 使用v-if v-else发现没有执行解决办法
May 15 #Javascript
AngularJs 常用的过滤器
May 15 #Javascript
Vue关于数据绑定出错解决办法
May 15 #Javascript
Jquery把获取到的input值转换成json
May 15 #jQuery
jQuery实现radio第一次点击选中第二次点击取消功能
May 15 #jQuery
jQuery返回定位插件详解
May 15 #jQuery
You might like
php对称加密算法示例
2014/05/07 PHP
2014年最新推荐的10款 PHP 开发框架
2014/08/01 PHP
javascript中动态加载js文件多种解决办法总结
2013/11/15 Javascript
jquery toolbar与网页浮动工具条具体实现代码
2014/01/12 Javascript
Javascript实现图片加载从模糊到清晰显示的方法
2016/06/21 Javascript
微信小程序实现卡片左右滑动效果的示例代码
2019/05/01 Javascript
Python中模块与包有相同名字的处理方法
2017/05/05 Python
python实现八大排序算法(1)
2017/09/14 Python
python3 判断列表是一个空列表的方法
2018/05/04 Python
pandas 读取各种格式文件的方法
2018/06/22 Python
基于Django框架利用Ajax实现点赞功能实例代码
2018/08/19 Python
Python日期时间模块datetime详解与Python 日期时间的比较,计算实例代码
2018/09/14 Python
windows系统中Python多版本与jupyter notebook使用虚拟环境的过程
2019/05/15 Python
用Pytorch训练CNN(数据集MNIST,使用GPU的方法)
2019/08/19 Python
Python实现字符串中某个字母的替代功能
2019/10/21 Python
python实现的Iou与Giou代码
2020/01/18 Python
Window系统下Python如何安装OpenCV库
2020/03/05 Python
基于FME使用Python过程图解
2020/05/13 Python
Python urllib库如何添加headers过程解析
2020/10/05 Python
html5 css3 动态气泡按钮实例演示
2012/12/02 HTML / CSS
澳大利亚网上玩具商店:Mr Toys Toyworld
2018/03/25 全球购物
3D空间设计学生找工作的自我评价
2013/10/28 职场文书
应届本科生推荐信范文
2013/12/25 职场文书
业务部经理岗位职责
2014/01/04 职场文书
护士辞职信范文
2014/01/19 职场文书
小学教师师德感言
2014/02/10 职场文书
法律系毕业生自荐信范文
2014/03/27 职场文书
小班评语大全
2014/05/04 职场文书
代领毕业证委托书
2014/08/02 职场文书
中班下学期幼儿评语
2014/12/30 职场文书
预备党员自我评价范文
2015/03/04 职场文书
捐书活动倡议书
2015/04/27 职场文书
节约用电倡议书
2015/04/28 职场文书
2016党员党课心得体会
2016/01/07 职场文书
Python利用folium实现地图可视化
2021/05/23 Python
在Oracle表中进行关键词搜索的过程
2022/06/10 Oracle