路由嵌套的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. mysql orderby 问题

    开发写的sql select * from aaa where course_id=xx order by  a,b 当a,b条件都一致时,默认应该以id排序,当数据条数大于1x条(17)时,结果变为 ...

  2. 牛客假日团队赛5 L Catch That Cow HDU 2717 （BFS）

    链接:https://ac.nowcoder.com/acm/contest/984/L 来源:牛客网 Catch That Cow 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 3 ...

  3. Codeforces 965 枚举轮数贪心分糖果 青蛙跳石头最大流=最小割思想 trie启发式合并

    A /*#include<cstring>#include<algorithm>#include<queue>#include<vector>#incl ...

  4. AI换脸教程：DeepFaceLab使用教程（2.训练及合成）

    如果前期工作已经准备完毕(DeepFaceLab下载(https://www.deepfacelabs.com/list-5-1.html),然后安装相应的显卡驱动,DeepFaceLab使用教程(1 ...

  5. Charles在windows上抓取本地python的 request请求

    首先打开charles,在Proxy中打开Windows Proxy,这样才能抓取本地请求 python代码中报错Caused by SSLError(SSLError(1, '[SSL: CERTI ...

  6. Python 3标准库课件第一章

    第一章文本1.1 string:文本常量和模板1.2 textwrap:格式化文本段落1.3 re:正则表达式1.4  difflib:比较序列str类,string.Templatetextwrap ...

  7. Mybatis-Plus和Mybatis的区别

    1.List item 区别一如果Mybatis Plus是扳手,那Mybatis Generator就是生产扳手的工厂.通俗来讲——MyBatis:一种操作数据库的框架,提供一种Mapper类,支持 ...

  8. spring自带工具类

    在spring-core.jar包中,org.springframework.util package下有很多工具类,这些工具类十分具有参考意义.

  9. windows 安装 Mongodb 数据库及操作图形化软件 Robo 3T

    1 下载系统对应的正确 Mongodb 和 Robo 3T 版本 2 选中 Mongodb 需要安装的路径(后续会使用路径) 3 启动 Mongodb 服务器(到安装相关的路径) 可以参考 菜鸟教程 ...

  10. EcShop开发手册

    Ecshop文件结构 ecshop文件架构说明 ECShop 结构图及各文件相应功能介绍 ECShop upload 的目录 ┣ activity.php 活动列表 ┣ affiche.php 广告处 ...