多层嵌套：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script src="bower_components/vue/dist/vue.js"></script>

    <script src="bower_components/vue-router/dist/vue-router.js"></script>

    <style>

        .v-link-active{

            font-size: 20px;

            color: #f60;

        }

    </style>

</head>

<body>

    <div id="box">

        <ul>

            <li>

                <a v-link="{path:'/home'}">主页</a>

            </li>

            <li>

                <a v-link="{path:'/news'}">新闻</a>

            </li>

        </ul>

        <div>

            <router-view></router-view>

        </div>

    </div>

    <template id="home">

        <h3>我是主页</h3>

        <div>

            <a v-link="{path:'/home/login'}">登录</a>

            <a v-link="{path:'/home/reg'}">注册</a>

        </div>

        <div>

            <router-view></router-view>

        </div>

    </template>

    <template id="news">

        <h3>我是新闻</h3>

    </template>

    <script>

        //1. 准备一个根组件

        var App=Vue.extend();

        //2. Home News组件都准备

        var Home=Vue.extend({

            template:'#home'

        });

        var News=Vue.extend({

            template:'#news'

        });

        //3. 准备路由

        var router=new VueRouter();

        //4. 关联

        router.map({

            'home':{

                component:Home,

                subRoutes:{

                    'login':{

                        component:{

                            template:'<strong>我是登录信息</strong>'

                        }

                    },

                    'reg':{

                        component:{

                            template:'<strong>我是注册信息</strong>'

                        }

                    }

                }

            },

            'news':{

                component:News

            }

        });

        //5. 启动路由

        router.start(App,'#box');

        //6. 跳转

        router.redirect({

            '/':'home'

        });

    </script>

</body>

</html>

效果图：

路由其他信息:
路由其他信息:

    /detail/:id/age/:age

    {{$route.params | json}}    ->  当前参数

    {{$route.path}}    ->  当前路径

    {{$route.query | json}}    ->  数据
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script src="bower_components/vue/dist/vue.js"></script>

    <script src="bower_components/vue-router/dist/vue-router.js"></script>

    <style>

        .v-link-active{

            font-size: 20px;

            color: #f60;

        }

    </style>

</head>

<body>

    <div id="box">

        <ul>

            <li>

                <a v-link="{path:'/home'}">主页</a>

            </li>

            <li>

                <a v-link="{path:'/news'}">新闻</a>

            </li>

        </ul>

        <div>

            <router-view></router-view>

        </div>

    </div>

    <template id="home">

        <h3>我是主页</h3>

        <div>

            <a v-link="{path:'/home/login/zns'}">登录</a>

            <a v-link="{path:'/home/reg/strive'}">注册</a>

        </div>

        <div>

            <router-view></router-view>

        </div>

    </template>

    <template id="news">

        <h3>我是新闻</h3>

        <div>

            <a v-link="{path:'/news/detail/001'}">新闻001</a>

            <a v-link="{path:'/news/detail/002'}">新闻002</a>

        </div>

        <router-view></router-view>

    </template>

    <template id="detail">

        {{$route.params | json}}

        <br>

        {{$route.path}}

        <br>

        {{$route.query | json}}

    </template>

    <script>

        //1. 准备一个根组件

        var App=Vue.extend();

        //2. Home News组件都准备

        var Home=Vue.extend({

            template:'#home'

        });

        var News=Vue.extend({

            template:'#news'

        });

        var Detail=Vue.extend({

            template:'#detail'

        });

        //3. 准备路由

        var router=new VueRouter();

        //4. 关联

        router.map({

            'home':{

                component:Home,

                subRoutes:{

                    'login/:name':{

                        component:{

                            template:'<strong>我是登录信息 {{$route.params | json}}</strong>'

                        }

                    },

                    'reg':{

                        component:{

                            template:'<strong>我是注册信息</strong>'

                        }

                    }

                }

            },

            'news':{

                component:News,

                subRoutes:{

                    '/detail/:id':{

                        component:Detail

                    }

                }

            }

        });

        //5. 启动路由

        router.start(App,'#box');

        //6. 跳转

        router.redirect({

            '/':'home'

        });

    </script>

</body>

</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. ES6展开运算符的3个用法

    展开运算符的用法1:传参 // 展开运算符的用法1 : 传参 function test(a,b) { return a + b ; } var arr = [1,2]; console.log(te ...

  2. day2（基础数据类型）

    一.基础数据类型操作 1.数字 int 数字主要是用于计算用的,使用方法并不是很多,就记住一种就可以: int.bit_length() -> int Number of bits necess ...

  3. Qt_MainWindow简介

    QMainWindow 是Qt框架带来的一个预定义好的主窗口类.按照建立HelloWorld程序建立工程,直接运行,或有一个空窗口. main().cpp #include "mainwin ...

  4. GPT分区在IBM服务器上安装linux不能引导的解决方法

    提示: Your boot partition is on a disk using the GPT partitioning Scheme but this machines cannot boot ...

  5. Codeforces Round #540 (Div. 3)--1118D1 - Coffee and Coursework (Easy version)

    https://codeforces.com/contest/1118/problem/D1 能做完的天数最大不超过n,因为假如每天一杯咖啡,每杯咖啡容量大于1 首先对容量进行从大到小的排序, sor ...

  6. Greys--JVM异常诊断工具

    https://github.com/oldmanpushcart/greys-anatomy/wiki/greys-pdf 一.简介 我们平时在线上或者开发中会遇到各种性能.功能等问题,在运行过程中 ...

  7. forward请求转发,param参数传递以及request.getParameter图文讲解

    <%@ page language="java" contentType="text/html;charset=utf-8" pageEncoding=& ...

  8. codeforces 477D

    题意:给定一个长度<=5000的二进制字符串S,以及一个初始为0的n,有一下两种操作: 1. 输出n(n>=1并且为2进制形式输出) 2.n=n+1 每次选择一种操作.. 求:1.有多少方 ...

  9. ASP.NET Web API 框架研究 IoC容器 DependencyResolver

    一.概念 1.IoC(Inversion of Control),控制反转 即将依赖对象的创建和维护交给一个外部容器来负责,而不是应用本身.如,在类型A中需要使用类型B的实例,而B的实例的创建不是由A ...

  10. AngularJs从数据库获取数据并显示

    哈哈,昨天下午和今天早上,花上一些时间,学习AngularJs,仅是粗略预览一下.很好,非常好. 由于手上有开发ASP.NET MVC环境,就在这测试下,去数据库获取数据并显示数据. 数据库表创建,添 ...