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 相关文章推荐
多浏览器支持的右下角浮动窗口
Apr 01 Javascript
jquery中的 $(&quot;#jb51&quot;)与document.getElementById(&quot;jb51&quot;) 的区别
Jul 26 Javascript
使用JavaScript 实现各种跨域的方法
May 08 Javascript
基于jquery实现的文字淡入淡出效果
Nov 14 Javascript
Javascript浅谈之this
Dec 17 Javascript
jQuery获取(选中)单选,复选框,下拉框中的值
Feb 21 Javascript
理理Vue细节(推荐)
Apr 16 Javascript
js实现随机数小游戏
Jun 28 Javascript
JS实现导航栏楼层特效
Jan 01 Javascript
探索node之事件循环的实现
Oct 30 Javascript
JavaScript实现浏览器网页自动滚动并点击的示例代码
Dec 05 Javascript
vue 实现图片懒加载功能
Dec 31 Vue.js
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
smarty模板嵌套之include与fetch性能测试
2010/12/05 PHP
php设计模式 Command(命令模式)
2011/06/26 PHP
又拍云异步上传实例教程详解
2016/04/19 PHP
JS宝典学习笔记(下)
2007/01/10 Javascript
Javascript中的相等与不等运算
2010/04/25 Javascript
javascript中的对象创建 实例附注释
2011/02/08 Javascript
JS+ACTIVEX实现网页选择本地目录路径对话框
2013/03/18 Javascript
jQuery简单实现禁用右键菜单
2015/03/10 Javascript
javascript实现的简单计时器
2015/07/19 Javascript
JavaScript中利用Array和Object实现Map的方法
2015/07/27 Javascript
javascript下拉列表菜单的实现方法
2015/11/18 Javascript
JAVASCRIPT代码编写俄罗斯方块网页版
2015/11/26 Javascript
Bootstrap幻灯片轮播图支持触屏左右手势滑动的实现方法
2016/10/13 Javascript
JavaScript表单验证开发
2016/11/23 Javascript
JS 实现随机验证码功能
2017/02/15 Javascript
原生JS实现跑马灯效果
2017/02/20 Javascript
vue.js学习之UI组件开发教程
2017/07/03 Javascript
微信小程序progress组件使用详解
2018/01/31 Javascript
js中的闭包学习心得
2018/02/06 Javascript
解决npm管理员身份install时出现权限的问题
2018/03/16 Javascript
解决Vue中mounted钩子函数获取节点高度出错问题
2018/05/18 Javascript
nodejs实现百度舆情接口应用示例
2020/02/07 NodeJs
微信小程序实现可长按移动控件
2020/11/01 Javascript
javascript实现点击产生随机图形
2021/01/25 Javascript
wxPython学习之主框架实例
2014/09/28 Python
python实现将元祖转换成数组的方法
2015/05/04 Python
python高效过滤出文件夹下指定文件名结尾的文件实例
2018/10/21 Python
python实现归并排序算法
2018/11/22 Python
python每5分钟从kafka中提取数据的例子
2019/12/23 Python
python用分数表示矩阵的方法实例
2021/01/11 Python
Python+MySQL随机试卷及答案生成程序的示例代码
2021/02/01 Python
德国在线订购鲜花:Fleurop
2018/08/25 全球购物
通信专业个人自我鉴定
2013/10/21 职场文书
人力资源主管职责范本
2014/03/05 职场文书
2014年教师节国旗下讲话稿
2014/09/10 职场文书
利用uni-app生成微信小程序的踩坑记录
2022/04/05 Javascript