VUE多层路由嵌套实现代码

 更新时间:2017年05月15日 16:02:08   作者:WakMeUp   我要评论
这篇文章主要为大家详细介绍了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()方法来挂载。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持澳门金沙网上娱乐。

相关文章

  • 详解从react转职到vue开发的项目准备

    详解从react转职到vue开发的项目准备

    这篇文章主要介绍了详解从react转职到vue开发的项目准备,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-01-01
  • Vuejs第九篇之组件作用域及props数据传递实例详解

    Vuejs第九篇之组件作用域及props数据传递实例详解

    这篇文章主要介绍了Vuejs第九篇之组件作用域及props数据传递实例详解的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-09-09
  • 基于Vue开发数字输入框组件

    基于Vue开发数字输入框组件

    本文通过实例代码给大家介绍了基于Vue开发数字输入框组件,需要的朋友可以参考下
    2017-12-12
  • vue大数据表格卡顿问题的完美解决方案

    vue大数据表格卡顿问题的完美解决方案

    这篇文章主要给大家介绍了基于vue大数据表格卡顿问题的完美解决方案,文中通过示例代码介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-03-03
  • 详解Vue 多级组件透传新方法provide/inject

    详解Vue 多级组件透传新方法provide/inject

    这篇文章主要介绍了详解Vue 多级组件透传新方法provide/inject,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • 图文介绍Vue父组件向子组件传值

    图文介绍Vue父组件向子组件传值

    本文通过实例代码给大家详细分享了Vue父组件向子组件传值的过程以及关键点讲解,一起学习参考下吧。
    2018-02-02
  • 解决vue打包css文件中背景图片的路径问题

    解决vue打包css文件中背景图片的路径问题

    今天小编就为大家分享一篇解决vue打包css文件中背景图片的路径问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vue项目webpack中Npm传递参数配置不同域名接口

    vue项目webpack中Npm传递参数配置不同域名接口

    这篇文章主要介绍了vue项目webpack中Npm传递参数配置不同域名接口,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • Vue.js学习之计算属性

    Vue.js学习之计算属性

    Vue.js 的内联表达式非常方便,但它最合适的使用场景是简单的布尔操作或字符串拼接。如果涉及更复杂的逻辑,你应该使用计算属性。下面这篇文章主要给大家介绍了Vue.js中的计算属性,需要的朋友可以参考借鉴,一起来看看吧。
    2017-01-01
  • vue2.0 实现导航守卫的具体用法(路由守卫)

    vue2.0 实现导航守卫的具体用法(路由守卫)

    这篇文章主要介绍了vue2.0 实现导航守卫的具体用法(路由守卫),vue-route 提供的 beforeRouteUpdate 可以方便地实现导航守卫(navigation-guards),具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-05-05

最新评论