多层嵌套：

<!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. prometheus+telegraf无法监控网络流量的问题

    原因是prometheus缺少以下紫色框的部分 解决办法: 比如要监控的机器ip为172.16.12.7,机器内部 安装了telegraf. 1)先查看机器的网卡:ifconfig 发现ip地址位于网 ...

  2. 第24章：MongoDB-聚合操作--MapReduce

    ①MapReduce 在MongoDB的聚合框架中,还可以使用MapReduce,它非常强大和灵活,但具有一定的复杂性,专门用于实现一些复杂的聚合功能. MongoDB中的MapReduce使用Jav ...

  3. Remote Debugging (2)

    use Eclipse| a Java application 创建一个简单的maven项目 Main.java package cn.zno; public class Main { public ...

  4. 安装BouncyCastle

    对于Windows而言 将bcprov-jdk16-146.jar 复制到C:\Program Files\Java\jre6\lib\ext和C:\jdk1.6.0\jre\lib\ext目录下: ...

  5. Android学习指南之三十八：Android手势操作编程[转]

    手势操作在我们使用智能设备的过程中奉献了不一样的体验.Android开发中必然会进行手势操作方面的编程.那么它的原理是怎样的呢?我们如何进行手势操作编程呢? 手势操作原理 首先,在Android系统中 ...

  6. MySQL修改root密码的3种方法

    方法1: 用SET PASSWORD命令 mysql -u rootmysql> SET PASSWORD FOR 'root'@'localhost' = PASSWORD('newpass' ...

  7. C#-VS异常处理

    VS异常处理 常规 try     可能会产生异常的代码,当一行产生异常,这行下面的代码不执行,转到catch开始执行 catch(system.Exception e)      e.message ...

  8. codeforces 877b

    B. Nikita and string time limit per test 2 seconds memory limit per test 256 megabytes input standar ...

  9. AngularJS $scope 继承性 作用 生命周期

    一.基本概念 作用域是一个指向应用模型的对象,相当于MVVM中的ViewModel,能绑定数据(属性)和行为(方法),能监控表达式和传递事件,是实现双向绑定的基础,是应用在 HTML (视图) 和 J ...

  10. scikit-FEM-例2-用Morley元在方形区域上解板弯曲问题

    """ Author: kinnala Solve the Kirchhoff plate bending problem in a unit square with c ...