<!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. Spring cloud微服务安全实战-4-9Zuul网关安全开发（二）

    把在微服务里面写的安全的相关逻辑挪到网关里面来.这样把安全逻辑和业务逻辑解耦开.那么这些问题就都解决了. 先来看下之前的安全的代码,首先在之类做了认证,认证服务器去认证,拿这个token去换用户信息. ...

  2. 【Redis】Redis Sentinel 哨兵模式搭建

    Redis Sentinel介绍 Redis Sentinel是Redis的官方高可用性解决方案 Redis Sentinel为Redis提供高可用性.实际上,这意味着使用Sentinel可以创建一个 ...

  3. RHEL7 的注册

    RHEL7 的注册 2016年09月12日 20:37:19 wojiushiwoba 阅读数 13002更多 分类专栏: 嵌入式linux   版权声明:本文为博主原创文章,遵循CC 4.0 BY- ...

  4. bat函数调用 带返回值

    bat 脚本之 使用函数 摘自:https://blog.csdn.net/peng_cao/article/details/73999076 综述 bat函数写法 bat函数调用 bat函数返回值 ...

  5. spring 传播行为与数据库事务ACID

    数据库事务ACID特性 数据库事务正确执行的4个基础要素是原子性(Atomicity).一致性(Consistency).隔离性(Isolation)和持久性(Durability). •原子性:整个 ...

  6. curl实现put请求

    <?php function curlrequest($url,$data,$method='post'){ $ch = curl_init(); //初始化CURL句柄 curl_setopt ...

  7. beego框架(golang)学习验证码

    beego框架(golang)学习验证码 登录页面使用验证码 路由设置 /beego_admin_template/routers/router.go get请求页面, post验证用户名密码和验证码 ...

  8. [转帖]InfiniBand, RDMA, iWARP, RoCE , CNA, FCoE, TOE, RDMA, iWARP, iSCSI等概念

    InfiniBand, RDMA, iWARP, RoCE , CNA, FCoE, TOE, RDMA, iWARP, iSCSI等概念 2017-12-15 15:37:00 jhzh951753 ...

  9. TypeScript tsconfig.json(TypeScript配置)

    如果一个目录下存在一个tsconfig.json文件,那么意味着这个目录是TypeScript项目的根目录. tsconfig.json文件中指定了用来编译这个项目的根文件和编译选项. 一个项目可以通 ...

  10. dotnet Core 图片验证码

    9102年了,.NET Core 2.x已经稳定,但是还是有很多人搞不定.NET Core的图片验证码. 下面说重点 1.引用Nuget包:System.Drawing.Common 2.像NET F ...