VUE多层路由嵌套实现代码
更新时间：2017年05月15日 16:02:08 作者：WakMeUp
这篇文章主要为大家详细介绍了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()方法来挂载。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
在开发项目时遇到由于选择了eslint导致的严格错误提示,如多个空格和多行报错,解决方案包括在webpack.base.conf.js中进行配置修改,创建项目时避免选择eslint,本文给大家介绍了Vue关闭eslint检测的多种方法,需要的朋友可以参考下2025-03-03
Vue开发模式是一种基于Vue.js框架的开发方式,它可以帮助开发者更高效地构建和维护复杂的Web应用程序,下面这篇文章主要给大家介绍了关于vue关闭开发模式提示的简单解决办法,需要的朋友可以参考下2024-04-04
最近小编遇到这样的问题，多组关键词，这里实现了关键词的背景色与匹配值的字体颜色值相同，下面通过定义关键词匹配改变字体颜色，本文通过实例代码给大家介绍的非常详细，需要的朋友参考下吧2019-07-07
这篇文章主要为大家介绍了简单方法实现Vue 无限滚动组件示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
在Vue项目中实现打印功能是前端开发中常见需求之一,这篇文章主要介绍了前端vue3打印功能实现的全部过程,文中介绍的方法实现了多页打印并且不使用插件,需要的朋友可以参考下2024-09-09
这篇文章主要介绍了vue同个按钮控制展开和折叠同个事件操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
vue中如何给el-table-column添加指定列的点击事件
elementui中提供了点击行处理事件,下面这篇文章主要给大家介绍了关于vue中如何给el-table-column添加指定列的点击事件,文中通过图文介绍的非常详细,需要的朋友可以参考下2022-11-11
这篇文章主要介绍了开发一个封装iframe的vue组件，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下2021-03-03
文章主要讨论了在 Vue 开发中实现页面返回停留原位置的多种方案,包括 Vuex、keep-alive、v-show、客户端跳转等,并分别阐述了它们的优缺点和适用情况,强调开发前应周全考虑前端业务和用户体验,根据实际业务选择合适方案,需要的朋友可以参考下2025-03-03
这篇文章主要介绍了vue3+ts封装弹窗及封装分页的示例代码,本文通过定义defaultDialog .vue,结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-08-08
最新评论