路由嵌套的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. python virtualenv和virtualenv的使用

    首先下面的步骤我都是在windows下执行,Python2.7,pip==19.1.1 1.安装virtualenv pip install virtualenv 2.新建virtualenv vir ...

  2. cnblogs博客使用LaTeX公式

    $ Entropy\ H(X) = -\sum p(X)\log p(X) $ $ Information\ Gain\ I(X,Y)= H(X)-H(X|Y) $ $ \pi $ = 3.14159 ...

  3. 移动端布局基础viewport

    划重点 手机屏幕相对着桌面浏览器小,传统网页的设计在手机上体验糟糕 Apple 在移动版 Safari 中定义了 viewport meta 标签(如果没记错最早提出的话),用于创建一个虚拟窗口(la ...

  4. ps雨滴效果制作

    雨滴效果制作 尽量选择比较暗或者有人打伞的照片,方便制作雨天的效果 新建图层,设置前景色为黑色,并填充新建的图层为黑色 选择滤镜->杂色->添加杂色,数量设置为150左右(设置得越大后面的 ...

  5. centos安装gitlab成果

    centos安装gitlab成果 开始之前 在开始之前请先查看官方的刚需文档: https://github.com/gitlabhq/gitlabhq/blob/master/doc/install ...

  6. HDU-3416-MarriageMatch4(最大流,最短路)

    链接: https://vjudge.net/problem/HDU-3416 题意: Do not sincere non-interference. Like that show, now sta ...

  7. 查看有没有绑这个host

    1.查看有没有绑这个host ping broker.vs.amap.com

  8. 字典,set

    字典 dict全称dictionary,在其他语言中也称为map,使用键-值(key-value)存储,具有极快的查找速度 存取速度快 key-value存储方式,在放进去的时候,必须根据key算出v ...

  9. z-tree官方提供的下拉菜单案例

    1.z-tree官方提供的下拉菜单案例 <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - selec ...

  10. Java面试题系列（六）优化tomcat配置

    序言 资料 如何优化tomcat配置(从内存.并发.缓存3个方面)优化