<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>嵌套router</title>

    <script src="./lib/vue-2.4.0.js"></script>

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

</head>

<body>

    <div class="container">

        <!-- 符组件的连接指向了denglu路径 -->

        <router-link to="/denglu">显示</router-link>

        <router-view></router-view>

    </div>

    <template id="account">

        <div>

            <h1>这个是一个组件</h1>

            <!-- 子组件的连接要指向denglu路径下的longin路径 -->

            <router-link to="/denglu/login">登录</router-link>

            <router-link to="/denglu/zhuce">注册</router-link>

            <router-view></router-view>

        </div>

    </template>

    <script>

        var box={

            template:'#account'

        }

        var login={

            template:'<h1>登录</h1>'

        }

        var zhuce={

            template:"<h1>注册</h1>"

        }

        var router=new VueRouter({

            routes: [

                // 路由规则主路径 指向了denglu    子路径使用children 属性，

                //实现子路由，同时，子路由的 path 前面，不要带 / ，否则永远以根路径开始请求，这样不方便我们用户去理解URL地址

                {path:'/denglu',component:box,children:[

                    {path:"login",component:login},

                    {path:"zhuce",component:zhuce},

                ]},

            ]

        })

        var vm=new Vue({

            el:".container",

            data:{},

            router

        })

    </script>

</body>

</html>

命名视图（就是给router-view  添加一个name属性）

　　

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <script src="./lib/vue-2.4.0.js"></script>

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

</head>

<body>

    <div class="container">

        <router-view name="header"></router-view>

        <div class="aa">

            <router-view name="left"></router-view>

            <router-view name="mian"></router-view>

        </div>

    </div>

    <!-- 添加样式 -->

    <style>

        .box{

            padding: 0;

            margin: 0;

        }

        h1{

            padding: 0;

            margin: 0;

        }

        .headerbox{

            background-color: green;

        }

    .aa{

        display: flex;

        height: 600px;

    }

    .leftbox{

        flex:2;

        background-color: hotpink;

    }

    .mianbox{

        flex:8;

        background-color: indigo;

    }

    </style>

    <script>

    var heaer={

        template:"<h1 class='headerbox'>这是网页的头部</h1>"

    }

    var leftbox={

        template:"<h1 class='leftbox'>这是网页的侧边栏</h1>"

    }

    var mianbox={

        template:"<h1 class='mianbox'>这是网页的主体</h1>"

    }

    var router=new VueRouter({

        routes: [

            {path:'/',components:{

                header:heaer,

                left:leftbox,

                mian:mianbox

            }}

        ]

    })

    var vm=new Vue({

        el:".container",

        data:{},

        router:router

    })

    </script>

</body>

</html>

Vue路由嵌套和命名视图的更多相关文章

  1. vue路由5：命名视图

    <div id="app"> <div> <router-link to="/">首页</router-link> ...

  2. Vue路由嵌套

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

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

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

  4. 062——VUE中vue-router之命名视图的实例

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

  5. vue 路由嵌套高亮问题

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

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

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

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

  8. vue路由--嵌套路由

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

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

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

随机推荐

  1. synchronized 同步对象概念

    解决上述问题之前,先理解synchronized关键字的意义如下代码:   Object someObject =new Object(); synchronized (someObject){ // ...

  2. [整理]Python程序员面试前需要看的博客(持续整理)

    基本素养 如何聪明的提问 面试方法 从面试官角度来告诉大家,哪些人能面试成功 如何在面试中介绍自己的项目经验 计算机系统 [面试] 迄今为止把同步/异步/阻塞/非阻塞/BIO/NIO/AIO讲的这么清 ...

  3. 保存wave音频流的方法

    保存到文件: void saveToFile(String filename, ByteBuffer buffer) { byte[] bytes = buffer.array(); OutputSt ...

  4. Python - Django - ORM QuerySet 方法补充

    models.py: from django.db import models class Employee2(models.Model): name = models.CharField(max_l ...

  5. 改进初学者的PID-微分冲击

    最近看到了Brett Beauregard发表的有关PID的系列文章,感觉对于理解PID算法很有帮助,于是将系列文章翻译过来!在自我提高的过程中,也希望对同道中人有所帮助.作者Brett Beaure ...

  6. 07点睛Spring MVC4.1-ContentNegotiatingViewResolver

    转发地址:https://www.iteye.com/blog/wiselyman-2214965 7.1 ContentNegotiatingViewResolver ContentNegotiat ...

  7. android基础---->数据保存到文件

    Android使用与其他平台类似的基于磁盘的文件系统(disk-based file systems).这篇博客将描述如何在Android文件系统上使用File的读写APIs对Andorid的file ...

  8. Ubuntu18.04彻底删除MySQL数据库

    首先在终端中查看MySQL的依赖项:dpkg --list|grep mysql 卸载: sudo apt-get remove mysql-common 卸载:sudo apt-get autore ...

  9. Meerkat软件

    一.准备工作 meerkat 0.189版本和以前的版本相比,支持bwa mem 输出的bam文件,还支持全外显子数据count SV. meerkat原理 1.1 需要准备的软件 unix/Linu ...

  10. CentOS 7 下安装 MySQL 5.7

    从 CentOS 7 系统开始,MariaDB 成为 yum 源中默认的数据库安装包.在 CentOS 7 及以上的系统中使用 yum 安装 MySQL 包将无法使用 MySQL.您可以选择使用完全兼 ...