VUE多层路由嵌套实现代码
2017-05-15 16:02
716 查看
先看看效果图:
例如:在做系统时,主页面有两个功能【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()方法来挂载。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- vue-cli实现多页面多路由的示例代码
- vue路由嵌套的SPA实现步骤
- Vue三层嵌套路由的示例代码
- VUE多层路由嵌套
- AngularJS使用ui-route实现多层嵌套路由的示例
- Vue实现路由跳转和嵌套
- ThinkPHP5 资源嵌套分组路由配置方法(可以根据需要实现多层嵌套,注意:资源嵌套分组路由配置顺序依次是嵌套层次递减) - 06
- vue-router 实现导航守卫(路由卫士)的实例代码
- vue.js通过路由实现经典的三栏布局实例代码
- Spring Boot/VUE中路由传递参数的实现代码
- Vue 多层组件嵌套二种实现方式(测试实例)
- 在html中使用Vue 路由嵌套-实现数据请求
- ThinkPHP5 资源嵌套路由配置方法(可以根据需要实现多层嵌套) - 05
- repeater控件介绍、 repeater嵌套的代码实现
- activitygroup的子activity中嵌套webview,利用webview与js交互,在实现js点击的内部类代码中实现activity跳转出现的线程问题
- Android中多层动态嵌套布局的实现
- wordpress自定义url参数实现路由功能的代码示例
- wordpress自定义url参数实现路由功能的代码示例
- Android中多层动态嵌套布局的实现