<!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. Linux下Mycat安装配置和使用

    mysql安装下载mysql[百度云]tar -zxvf mysql-5.6.32-linux-glibc2.5-x86_64.tar.gz 解压把mysql文件夹移动到 /usr/local/ 下m ...

  2. Qt编写气体安全管理系统5-数据监控

    一.前言 本项目对设备的监控有四种视图模式,可以任意切换,数据监控.地图监控.设备监控.曲线监控,其中数据监控是最常用的,所以在主界面导航中也排在第一位,综合观察分析了很多气体安全或者组态监控软件,大 ...

  3. Glide图片加载过程(简)

    iceIC 关注 2018.10.25 20:53* 字数 906 阅读 529评论 0喜欢 1 调研版本为4.7.1为了更加简单的理解,会将函数代码简化,详细代码请自行照源码对比 Glide用法 G ...

  4. matlab优化函数fminunc

    一起来学演化计算-matlab优化函数fminunc 觉得有用的话,欢迎一起讨论相互学习~Follow Me fminunc 求无约束多变量函数的最小值 非线性编程求解器 找到指定问题的最小值,\(m ...

  5. CA认证以及https的实现

    (1).CA认证 CA全称Certificate Authority,通常翻译成认证权威或者认证中心,主要用途是为用户发放数字证书.认证中心(CA)的功能:证书发放.证书更新.证书撤销和证书验证.CA ...

  6. .Net Core 程序报错 在上一个操作完成之前，在此上下文上启动了第二个操作。

    错误一: 程序完整报错: A second operation started on this context before a previous operation completed. This ...

  7. Andrew Ng机器学习课程10

    Andrew Ng机器学习课程10 a example 如果hypothesis set中的hypothesis是由d个real number决定的,那么用64位的计算机数据表示的话,那么模型的个数一 ...

  8. eNSP——实现OSPF与ACL综合实验

    OSPF与ACL再前几个随笔中提到了,现在我们来做一个实例. 拓扑图: 实验案例要求: 1.企业内网运行OSPF路由协议,区域规划如图所示:2.财务和研发所在的区域不受其他区域链路不稳定性影响:3.R ...

  9. clang, gcc, gdb

    Clang 比 GCC 编译器的优势: 1 编译速度更快 2 编译产出更小 3 出错提示更友好,比如 clang 在编译过程可以直接指出相对简单的出错位置以及它 " 认为 " 正确 ...

  10. RedHat Linux下普通用户无法使用sudo命令的解决方法

    Ref:http://blog.sina.com.cn/s/blog_4aa35ca101012qb6.html 装完linux系统,发现普通用户无法使用sudo 命令, 提示:User1(普通用户) ...