<!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 Ribbon 客户端负载均衡 4.3

      在分布式架构中,服务器端负载均衡通常是由Nginx实现分发请求的,而客户端的同一个实例部署在多个应用上时,也需要实现负载均衡.那么Spring Cloud中是否提供了这种负载均衡的功能呢?答案是肯 ...

  2. Python - Django - 封装分页成通用的模块

    新建 utils 文件夹,并创建 page.py page.py: class ShowPage(object): def __init__(self, page_num, total_count, ...

  3. shell每隔一秒钟就记录下netstat状态

    说明 木马可能类似随机发送心跳包的操作,随机sleep.对这类情况写好了一个监听shell脚本,每隔一秒钟就记录下netstat状态. 代码 #!/bin/bash #功能:用于定时执行lsof 和 ...

  4. 超详细的Tensorflow模型的保存和加载（理论与实战详解）

    1.Tensorflow的模型到底是什么样的? Tensorflow模型主要包含网络的设计(图)和训练好的各参数的值等.所以,Tensorflow模型有两个主要的文件: a) Meta graph: ...

  5. java程序cpu问题排查

    方法一: 转载:http://www.linuxhot.com/java-cpu-used-high.html 1.jps 获取Java进程的PID. 2.jstack pid >> ja ...

  6. mongodb 内嵌数组查询问题： 如何限定返回与条件匹配的数组

    原文地址:https://segmentfault.com/q/1010000002943721

  7. 安装Windows和Ubuntu双系统

    发现关注消息 安装Windows和Ubuntu双系统     安装Windows和Ubuntu双系统 0.552016.12.10 15:54:41字数 2101阅读 6644 这几天开始动手做毕设啦 ...

  8. ASP.NET CORE（C#）与Spring Boot MVC(JAVA)

    干货分享:ASP.NET CORE(C#)与Spring Boot MVC(JAVA)异曲同工的编程方式总结   目录 C# VS JAVA 基础语法类比篇: 一.匿名类 二.类型初始化 三.委托(方 ...

  9. eclipse设置格式化tab为4个空格和idea一样

  10. LeetCode 404. 左叶子之和(Sum of Left Leaves)

    404. 左叶子之和 404. Sum of Left Leaves LeetCode404. Sum of Left Leaves 题目描述 计算给定二叉树的所有左叶子之和. 示例: 3 / \ 9 ...