时间:2021-05-26
本文实例为大家分享了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()方法来挂载。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
方法1:div嵌套实现多重边框。效果图:html代码XML/HTMLCode复制内容到剪贴板div嵌套实现多重边框css代码CSSCode复制内容到剪贴板#ou
本文实例讲述了vue多层嵌套路由。分享给大家供大家参考,具体如下:多层嵌套:Document.v-link-active{font-size:20px;colo
本文实例讲述了vue嵌套路由与404重定向实现方法。分享给大家供大家参考,具体如下:第一部分:vue嵌套路由嵌套路由是什么?嵌套路由就是在一个被路由过来的页面下
随着Vue.js单页应用(SPA)变得相当复杂,你开始需要Vue路由以及嵌套路由。嵌套路由允许更复杂的用户界面以及相互嵌套的组件。让我们创建一个相对简单的用例,
Vue嵌套路由:实现效果(路由三层嵌套,点击一级tab显示二级tab效果,二级tab点击切换对应内容,不在tab区域里的内容,切换时不重复渲染):Demo访问时