路由嵌套的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. tensorflow 屏蔽 Log

    pip install alfred-py 在代码中加入 from alfred.dl.tf.common import mute_tf mute_tf()

  2. linux下的命令和常见问题笔记

    nginx的三大功能: 1.http服务 2.反向代理 3.负载均衡 2.当nginx重启报:[root@localhost logs]# service nginx reloadReloading ...

  3. ZROI 19.08.08模拟赛

    传送门 写在前面:为了保护正睿题目版权,这里不放题面,只写题解. 首先恭喜swk今天翻车! "小心大样例演你."--天祺鸽鸽 果然swk今天被大样例演死了,天祺鸽鸽诚不欺我! A ...

  4. org.springframework.web.servlet.view.ContentNegotiatingViewResolver

    restful服务中一个重要的特性就是一种资源可以有多种表现形式,在springmvc中可以使用ContentNegotiatingViewResolver这个视图解析器来实现这种方式. 描述资源的三 ...

  5. 使用tensorflow训练word2vec

    from http://blog.csdn.net/wangyangzhizhou/article/details/77530479?locationNum=1&fps=1 使用了tensor ...

  6. Java 数组复制之clone方法

    一.源码 public class Test1 { public static void main(String[] args) { // Student[] arrs = new Student[] ...

  7. Python基础(四)

    一.迭代器       让不同数据类型具有相同的遍历方式:list.dict.str.tuple.set 1.特点: ①省内存 ②只能向前,不能反复 ③惰性机制 2.可迭代对象 ###dir() 查看 ...

  8. 浅谈Android的资源编译过程

    转载自 http://www.cnblogs.com/dyllove98/p/3144950.html 好长,记录下,一次看完感觉像没看一样 Android APK 一．APK的结构以及生成 APK是 ...

  9. @ENABLECACHING 基于注解的缓存

    @EnableCaching• @Cacheable指定一个或多个Cache名字,同属性cacheNamesSpring Cache 使用 ---@EnableCaching @Cacheable 注 ...

  10. 【BZOJ3931】[CQOI2015]网络吞吐量

    Description 路由是指通过计算机网络把信息从源地址传输到目的地址的活动,也是计算机网络设计中的重点和难点.网络中实现路由转发的硬件设备称为路由器.为了使数据包最快的到达目的地,路由器需要选择 ...