多层嵌套：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <script src="bower_components/vue/dist/vue.js"></script>
  7.     <script src="bower_components/vue-router/dist/vue-router.js"></script>
  8.     <style>
  9.         .v-link-active{
  10.             font-size: 20px;
  11.             color: #f60;
  12.         }
  13.     </style>
  14. </head>
  15. <body>
  16.     <div id="box">
  17.         <ul>
  18.             <li>
  19.                 <a v-link="{path:'/home'}">主页</a>
  20.             </li>
  21.             <li>
  22.                 <a v-link="{path:'/news'}">新闻</a>
  23.             </li>
  24.         </ul>
  25.         <div>
  26.             <router-view></router-view>
  27.         </div>
  28.     </div>
  29.  
  30.     <template id="home">
  31.         <h3>我是主页</h3>
  32.         <div>
  33.             <a v-link="{path:'/home/login'}">登录</a>
  34.             <a v-link="{path:'/home/reg'}">注册</a>
  35.         </div>
  36.         <div>
  37.             <router-view></router-view>
  38.         </div>
  39.     </template>
  40.     <template id="news">
  41.         <h3>我是新闻</h3>
  42.     </template>
  43.     <script>
  44.         //1. 准备一个根组件
  45.         var App=Vue.extend();
  46.  
  47.         //2. Home News组件都准备
  48.         var Home=Vue.extend({
  49.             template:'#home'
  50.         });
  51.  
  52.         var News=Vue.extend({
  53.             template:'#news'
  54.         });
  55.  
  56.         //3. 准备路由
  57.         var router=new VueRouter();
  58.  
  59.         //4. 关联
  60.         router.map({
  61.             'home':{
  62.                 component:Home,
  63.                 subRoutes:{
  64.                     'login':{
  65.                         component:{
  66.                             template:'<strong>我是登录信息</strong>'
  67.                         }
  68.                     },
  69.                     'reg':{
  70.                         component:{
  71.                             template:'<strong>我是注册信息</strong>'
  72.                         }
  73.                     }
  74.                 }
  75.             },
  76.             'news':{
  77.                 component:News
  78.             }
  79.         });
  80.  
  81.         //5. 启动路由
  82.         router.start(App,'#box');
  83.  
  84.         //6. 跳转
  85.         router.redirect({
  86.             '/':'home'
  87.         });
  88.     </script>
  89. </body>
  90. </html>

效果图：

  1. 路由其他信息:
  1. 路由其他信息:
  2.     /detail/:id/age/:age
  3.  
  4.     {{$route.params | json}}    ->  当前参数
  5.  
  6.     {{$route.path}}    ->  当前路径
  7.  
  8.     {{$route.query | json}}    ->  数据
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <script src="bower_components/vue/dist/vue.js"></script>
  7.     <script src="bower_components/vue-router/dist/vue-router.js"></script>
  8.     <style>
  9.         .v-link-active{
  10.             font-size: 20px;
  11.             color: #f60;
  12.         }
  13.     </style>
  14. </head>
  15. <body>
  16.     <div id="box">
  17.         <ul>
  18.             <li>
  19.                 <a v-link="{path:'/home'}">主页</a>
  20.             </li>
  21.             <li>
  22.                 <a v-link="{path:'/news'}">新闻</a>
  23.             </li>
  24.         </ul>
  25.         <div>
  26.             <router-view></router-view>
  27.         </div>
  28.     </div>
  29.  
  30.     <template id="home">
  31.         <h3>我是主页</h3>
  32.         <div>
  33.             <a v-link="{path:'/home/login/zns'}">登录</a>
  34.             <a v-link="{path:'/home/reg/strive'}">注册</a>
  35.         </div>
  36.         <div>
  37.             <router-view></router-view>
  38.         </div>
  39.     </template>
  40.     <template id="news">
  41.         <h3>我是新闻</h3>
  42.         <div>
  43.             <a v-link="{path:'/news/detail/001'}">新闻001</a>
  44.             <a v-link="{path:'/news/detail/002'}">新闻002</a>
  45.         </div>
  46.         <router-view></router-view>
  47.     </template>
  48.     <template id="detail">
  49.         {{$route.params | json}}
  50.         <br>
  51.         {{$route.path}}
  52.         <br>
  53.         {{$route.query | json}}
  54.     </template>
  55.     <script>
  56.         //1. 准备一个根组件
  57.         var App=Vue.extend();
  58.  
  59.         //2. Home News组件都准备
  60.         var Home=Vue.extend({
  61.             template:'#home'
  62.         });
  63.  
  64.         var News=Vue.extend({
  65.             template:'#news'
  66.         });
  67.  
  68.         var Detail=Vue.extend({
  69.             template:'#detail'
  70.         });
  71.  
  72.         //3. 准备路由
  73.         var router=new VueRouter();
  74.  
  75.         //4. 关联
  76.         router.map({
  77.             'home':{
  78.                 component:Home,
  79.                 subRoutes:{
  80.                     'login/:name':{
  81.                         component:{
  82.                             template:'<strong>我是登录信息 {{$route.params | json}}</strong>'
  83.                         }
  84.                     },
  85.                     'reg':{
  86.                         component:{
  87.                             template:'<strong>我是注册信息</strong>'
  88.                         }
  89.                     }
  90.                 }
  91.             },
  92.             'news':{
  93.                 component:News,
  94.                 subRoutes:{
  95.                     '/detail/:id':{
  96.                         component:Detail
  97.                     }
  98.                 }
  99.             }
  100.         });
  101.  
  102.         //5. 启动路由
  103.         router.start(App,'#box');
  104.  
  105.         //6. 跳转
  106.         router.redirect({
  107.             '/':'home'
  108.         });
  109.     </script>
  110. </body>
  111. </html>

效果图：

vue教程3-06 vue路由嵌套(多层路由)，路由其他信息的更多相关文章

  1. vue教程1-09 交互 vue实现百度下拉列表

    vue教程1-09 交互 vue实现百度下拉列表 <!DOCTYPE html> <html lang="en"> <head> <met ...

  2. [AngularJS] “多重路由”嵌套模块——AngularJS“路由”嵌套学习资料教程

    这是小编的一些学习资料,理论上只是为了自己以后学习需要的,但是还是需要认真对待的 以下内容仅供参考,请慎重使用学习 1.AngularJS路由嵌套 Angularjs本身自带路由模块,可以满足通过不同 ...

  3. vue-router路由嵌套与二级路由重定向

    (1)公共路由裁减 不是每个页面都存在导航,所以不要把导航组件在根组件APP.vue里引入,哪个页面需要,在哪里引入即可. 方案: 哪个页面需要,在哪个页面引入即可 (2)嵌套路由 注意:childr ...

  4. 我的一个React路由嵌套（多级路由），路由传参之旅

    在上一篇react路由之旅中,我们简单地配置了react,进行了react路由及相关知识的学习,引入以及实现一个局部跳转的功能,接下来就是深入学习路由的嵌套以及传参,这是工作中主要用要的. 我的rea ...

  5. Vue总结第五天：vue-router （使用模块化（创建Vue组件）机制编程）、router-link 标签的属性、路由代码跳转、懒加载、路由嵌套（子路由）、路由传递数据、导航守卫）

    Vue总结第五天:vue-router ✿ 路由(器)目录: □  vue中路由作用 □  vue-router基本使用 □  vue-router嵌套路由 □  vue-router参数传递 □  ...

  6. 06 Vue路由简介,原理,实现及嵌套路由,动态路由

    路由概念 路由的本质就是一种对应关系,比如说我们在url地址中输入我们要访问的url地址之后,浏览器要去请求这个url地址对应的资源. 那么url地址和真实的资源之间就有一种对应的关系,就是路由. 路 ...

  7. vue学习路由嵌套

    1. 路由嵌套和参数传递 传参的两种形式: a.查询字符串:login?name=tom&pwd=123 {{$route.query}} ------ <li><route ...

  8. vue教程3-05 vue组件数据传递、父子组件数据获取，slot,router路由

    vue教程3-05 vue组件数据传递 一.vue默认情况下,子组件也没法访问父组件数据 <!DOCTYPE html> <html lang="en"> ...

  9. vue教程3-01 路由、组件、bower包管理器使用

    vue教程3-01 路由.组件.包管理器 以下操作前提是 已经安装好node.js npm bower-> (前端)包管理器 下载: npm install bower -g 验证: bower ...

随机推荐

  1. 第15章 上下文管理器和else块

    #<流流畅的Python>第15章 上下文管理器和else块 #15.1 先做这个,再做那个:if语句之外的else块 #else子句不仅能在if语句中使用,还能在for.while和tr ...

  2. C# 编码标准(一)

    一直想写一个自己用的代码标准,经过一段时间的优秀开源源码的观察和看其他人写的标准,感觉好的代码给人感觉就是舒服,也非常重要.所以把它们记录归纳总结,以备以后忘记,另外平时写代码的时候可以拿来参考下.下 ...

  3. shell字符串分割截取和转换总结

    一:字符串的截取 假定有定义变量VAR=mm/aa/bb/dd 1.获取字符串长度:echo "${#VAR}",即输出11: 2.非贪婪模式删除左边的,保留右边的:echo &q ...

  4. 关于css中设置属性的常识

    1.cellspacing 属性规定单元格之间的空间,请勿将该属性与 cellpadding 属性相混淆. 2.cellpadding 属性规定的是单元边沿与单元内容之间的空间. 3.text-ali ...

  5. 微信接入时tomcat的端口调整

    必须以http://或https://开头,分别支持80端口和443端口. www.xx.com 等同于 www.xx.com:80 但tomcat默认端口是8080,需要修改为80 修改方法: TO ...

  6. C# String字符串

    C#(静态String类) C#中提供了比较全面的字符串处理方法,很多函数都进行了封装为我们的编程工作提供了很大的便利.System.String是最常用的字符串操作类,可以帮助开发者完成绝大部分的字 ...

  7. Forward团队-爬虫豆瓣top250项目-团队编程项目开发环境搭建过程

    本次结对编程和团队项目我都需要用python环境,所以环境的搭建是一样的.(本文部分内容引用自己博客:http://www.cnblogs.com/xingyunqi/p/7527411.html) ...

  8. Scala界面事件处理编程实战详解.

    今天学习了一个Scala界面事件处理编程,让我们从代码出发. import scala.swing._import scala.swing.event._ object GUI_Panel exten ...

  9. 3、利用GDB进行程序调试

    本文将用一个实际例子讲解如何通过GDB进行程序调试. 首先,我们需要理解的是GDB是GNU开源组织发布的一个强大的UNIX下的程序调试工具,其产生和调试的目的是让调试者知道,程序在执行时内部发生了什么 ...

  10. Swift可向上滑移出界面的欢迎页简单封装

    使用: -(WelcomView*)welcomeView{ if (!_welcomeView) { _welcomeView = [[NSBundle mainBundle] loadNibNam ...