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 相关文章推荐
js 内存释放问题
Apr 25 Javascript
在Windows上安装Node.js模块的方法
Sep 25 Javascript
js一般方法改写成面向对象方法的无限级折叠菜单示例代码
Jul 04 Javascript
Javascript基础教程之数据类型转换
Jan 18 Javascript
JS实现三级折叠菜单特效,其它级可自动收缩
Aug 06 Javascript
快速掌握Node.js环境的安装与运行方法
Feb 16 Javascript
JavaScript头像上传插件源码分享
Mar 29 Javascript
JS传递对象数组为参数给后端,后端获取的实例代码
Jun 28 Javascript
javascript类型系统——日期Date对象全面了解
Jul 13 Javascript
JS制作图形验证码实现代码
Oct 19 Javascript
Vue.js实现的计算器功能完整示例
Jul 11 Javascript
Puppet的一些技巧
Sep 17 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
星际争霸中的热键
2020/03/04 星际争霸
Apache2 httpd.conf 中文版
2006/12/06 PHP
用PHP与XML联手进行网站编程代码实例
2008/07/10 PHP
解析如何修改phpmyadmin中的默认登陆超时时间
2013/06/25 PHP
php的hash算法介绍
2014/02/13 PHP
Javascript与PHP验证用户输入URL地址是否正确
2014/10/09 PHP
基于PHP实现商品成交时发送短信功能
2016/05/11 PHP
thinkphp3.2实现跨控制器调用其他模块的方法
2017/03/14 PHP
PHP session垃圾回收机制实例分析
2019/06/28 PHP
jQuery 使用手册(三)
2009/09/23 Javascript
js变量、作用域及内存详解
2014/09/23 Javascript
JS建造者模式基本用法实例分析
2015/06/30 Javascript
微信小程序模版渲染详解
2018/01/26 Javascript
JavaScript 正则应用详解【模式、欲查、反向引用等】
2020/05/13 Javascript
Vue结合路由配置递归实现菜单栏功能
2020/06/16 Javascript
node使用async_hooks模块进行请求追踪
2021/01/28 Javascript
[01:04:31]DOTA2-DPC中国联赛定级赛 iG vs Magma BO3第二场 1月8日
2021/03/11 DOTA
python里将list中元素依次向前移动一位
2014/09/12 Python
python中的全局变量用法分析
2015/06/09 Python
Python实现删除列表中满足一定条件的元素示例
2017/06/12 Python
Centos下实现安装Python3.6和Python2共存
2018/08/15 Python
Python模拟浏览器上传文件脚本的方法(Multipart/form-data格式)
2018/10/22 Python
HTML5 input新增type属性color颜色拾取器的实例代码
2018/08/27 HTML / CSS
德国、奥地利和瑞士最大的旅行和度假门户网站:HolidayCheck
2019/11/14 全球购物
英国最受欢迎的母婴精品品牌:JoJo Maman BéBé
2021/02/17 全球购物
港湾网络笔试题
2014/04/19 面试题
企业文明单位申报材料
2014/05/16 职场文书
法学自荐信
2014/06/20 职场文书
纪念九一八事变83周年国旗下讲话稿
2014/09/15 职场文书
四风批评与自我批评范文
2014/10/14 职场文书
2015年村计划生育工作总结
2015/04/28 职场文书
结婚仪式主持词
2015/06/29 职场文书
初三语文教学反思
2016/03/03 职场文书
关于Numpy之repeat、tile的用法总结
2021/06/02 Python
MYSQL 无法识别中文的永久解决方法
2021/06/03 MySQL
教你如何使用Python开发一个钉钉群应答机器人
2021/06/21 Python