路由嵌套的SPA实现的步骤：

A（/a）组件需要嵌套B组件(/b)和C组件(/c)

①准备嵌套其它组价的父组件 指定一个容器
在A组件指定一个容器
<router-view></router-ivew>

②在A组件的路由配置对象中指定children属性
{
path:'/a',
component:A,
children:[
{path:'/b',component:B},
{path:'/c',component:C},
]
}

补充：
//数字如果超出记录的次数，是不行的。
this.$router.go(num);
如果num是正数，向前进
如果num是负数，向后退

<!doctype html>

<html>

 <head>

  <meta charset="UTF-8">

  <title>路由嵌套</title>

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

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

 </head>

 <body>

  <div id="container">

        <p>{{msg}}</p>

        <router-view></router-view>

    </div>

    <script>

//登录组件

        var myLogin = Vue.component("login",{

            template:`

                <div>

                    <h1>登录组件</h1>

                    <router-link to="/mail">登录</router-link>

                </div>

        `

        })

//    邮箱页面

        var myMail = Vue.component("mail",{

//        定义一个返回的方法

            methods:{

                goBack:function(){

                    this.$router.go(-1);

                }

            },

            template:`

                <div>

                    <h1>邮箱主页面</h1>

                    <ul>

                        <li>

                            <router-link to="/inbox">收件箱</router-link>

                        </li>

                        <li>

                            <router-link to="/outbox">发件箱</router-link>

                        </li>

                    </ul>

//                点击按钮返回前面的页面

                    <button @click="goBack">返回</button>

                    <router-view></router-view>

                </div>

        `

//    指定一个容器,加载收件箱或收件箱的列表

        })

//    收件箱组件

        var myInBox = Vue.component("inbox-component",{

            template:`

                <div>

                    <h4>收件箱</h4>

                    <ul>

                        <li>未读邮件1</li>

                        <li>未读邮件2</li>

                        <li>未读邮件3</li>

                    </ul>

                </div>

        `

        })

//    发件箱组件

        var myOutBox = Vue.component("outbox-component",{

            template:`

                <div>

                    <h4>发件箱</h4>

                    <ul>

                        <li>已发送邮件1</li>

                        <li>已发送邮件2</li>

                        <li>已发送邮件3</li>

                    </ul>

                </div>

        `

        })

        //配置路由词典

        new Vue({

            router:new VueRouter({

                routes:[

                    {path:'',redirect:'/login'},

                    {path:'/login',component:myLogin},

                    {path:'/mail',component:myMail,children:[

                        {path:'/inbox',component:myInBox},

                        {path:'/outbox',component:myOutBox}

                ]},

                ]

            }),

            el:"#container",

            data:{

                msg:"Hello VueJs"

            }

        })

        //通过再次指定一个<router-view></router-view>和children:[]

    </script>

 </body>

</html>

vue--路由嵌套的更多相关文章

  1. Vue路由嵌套

    Vue路由嵌套 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  2. vue 路由嵌套 及 router-view vue-router --》children

    vue 路由嵌套 vue-router -->children   在项目的很多子页面中,我们往往需要在同一个页面做一个组件的切换,同时保存这个页面的部分数据(比如树形菜单),进而显示不同的数据 ...

  3. vue 路由嵌套高亮问题

    正常路由嵌套是没有问题的,但是如果你已经在当前主路由页面了,然后再次点击主路由就会出现页面数据空白的情况 看代码: //主路由通过v-for循环出来 <div class="list- ...

  4. vue教程3-06 vue路由嵌套(多层路由)，路由其他信息

    多层嵌套: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  5. Vue路由嵌套和命名视图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. vue路由--嵌套路由

    静态嵌套路由: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  7. vue路由嵌套，vue動態路由

    https://www.cnblogs.com/null11/p/7486735.html https://www.cnblogs.com/goloving/p/9271501.html https: ...

  8. 关于vue路由嵌套遇到的坑~

    关键在于子路由中的path问题,path之前不要放/ <!DOCTYPE html> <html lang="en"> <head> <m ...

  9. vue路由嵌套，对应展示的视图

  10. vue学习路由嵌套

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

随机推荐

  1. Centos7下lvs负载均衡lvs-tun模式配置

    一.架构 director:172.28.18.69 vip:172.28.18.70 real server1:172.28.18.71 real server2:172.28.18.78 二.两台 ...

  2. 如何在 Visual C# 中执行基本的文件 I/O

    演示文件 I/O 操作 本文中的示例讲述基本的文件 I/O 操作.“分步示例”部分说明如何创建一个演示下列六种文件 I/O 操作的示例程序: 注意:如果要直接使用下列示例代码,请注意下列事项: 必须包 ...

  3. java面试（Web相关）06

    1.JSP 和 servlet 有什么区别? JSP 是 servlet 技术的扩展,本质上就是 servlet 的简易方式.servlet 和 JSP 最主要的不同点在于,servlet 的应用逻辑 ...

  4. jenkins打包maven工程发现有些包下载不下来

    将这些依赖的jar包放到mvn的本地仓库中,通常是用户主目录下的.m2/repository https://blog.csdn.net/taiyangdao/article/details/5228 ...

  5. spring事务配置，声明式事务管理和基于@Transactional注解的使用（转载）

    原文地址:http://blog.csdn.net/bao19901210/article/details/41724355 事务管理对于企业应用来说是至关重要的,好使出现异常情况,它也可以保证数据的 ...

  6. Yii和ThinkPHP对比心得

    本人小菜鸟一只,为了自我学习和交流PHP(jquery,linux,lamp,shell,javascript,服务器)等一系列的知识,小菜鸟创建了一个群.希望光临本博客的人可以进来交流.寻求共同发展 ...

  7. oracle基本语句（第五章、数据库逻辑存储结构管理）

    1.使用SYS用户以SYSDBA身份登录到SQL Plus,使用视图V$TABLESPACE查看表空间信息 SELECT * FROM V$TABLESPACE; 2.查看视图DBA_TABLESPA ...

  8. 【NOIP2017模拟12.3】子串

    题目 分析 对于当前枚举串 \(now\),从前往后扫.若扫到 \(i\),\(s_i\) 是 ; \(s_j\) 的子串 \((i < j < now)\),我们就可以跳过不匹配 \(i ...

  9. 【NOIP2016提高A组模拟8.19】(雅礼联考day2)总结

    第一题又有gcd,又有xor,本来想直接弃疗,不过后来想到了个水法: 当两个相邻的数满足条件时,那么他们的倍数也可能满足条件.然后没打,只打了个暴力. 正解就是各种结论,各种定理搞搞. 第二题,想都不 ...

  10. Python机器学习常用库记录

    1.argparse http://www.jianshu.com/p/fef2d215b91d 命令行解释工具 2.tflearn http://tflearn.org/doc_index/ ten ...