路由嵌套的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深入：编码问题总结

    转自:http://blog.csdn.net/gqtcgq/article/details/47068817 一:字符编码简介          1:ASCII          最初的计算机的使用 ...

  2. DNS域名工作原理及解析

    0x00 定义 DNS( Domain Name System)是“域名系统”的英文缩写,它作为将域名和IP地址相互映射的一个分布式数据库,能够使人更方便地访问互联网.DNS使用TCP和UDP端口53 ...

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

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

  4. 移动端适配 后篇（rem+vm）

    涉及到的一些名词, 详细解释可参考 移动端适配前篇--移动端适配 rem 名词解释 [英寸Inch]英寸表示屏幕斜对角线的长度 [像素Pixel]像素是图像的基本采样单位,它不是一个确定的物理量,因为 ...

  5. Quartz（一）

    1 Quartz介绍 定时任务,无论是互联网公司还是传统的软件行业都是必不可少的,Quartz是好多优秀的定时任务开源框架的基础的. 我们应用最简单和最基础的配置,不需要太多参数,就可以轻松掌握企业中 ...

  6. ELF程序头部及程序加载

    程序头部 程序头部描述与程序执行直接相关的目标文件结构信息.用来在文件中定位各个段的映像.同时包含其他一些用来为程序创建进程映像所必需的信息. 可执行文件或者共享目标文件的程序头部是一个结构数组,每个 ...

  7. iOS给UIView添加点击事件

    我要给一个UIView对象topView添加点击事件,方法如下: 步骤1:创建手势响应函数 (void)event:(UITapGestureRecognizer *)gesture { //处理事件 ...

  8. 算法——求n对（）有多少种输出方式？

    letcode:22 Given n pairs of parentheses, write a function to generate all combinations of well-forme ...

  9. Text-CNN 文本分类

    1.简介 TextCNN 是利用卷积神经网络对文本进行分类的算法,由 Yoon Kim 在 “Convolutional Neural Networks for Sentence Classifica ...

  10. pycharm问题集锦

    1.pycharm的激活方式 参考博客https://blog.csdn.net/u014044812/article/details/78727496 2.总是出现波浪线,如下问题 问题原因:knn ...