<!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. Python - Django - session 的基本使用

    urls.py: from django.conf.urls import url from app02 import views urlpatterns = [ # app02 url(r'^app ...

  2. 【2B设计】途牛商旅全案设计

    整体设计方案: 途牛商旅全案设计 https://www.uisdc.com/tuniu-business-travel

  3. MySQL插入大批量数据时报错“The total number of locks exceeds the lock table size”的解决办法

    事情的原因是:我执行了一个load into语句的SQL将一个很大的文件导入到我的MySQL数据库中,执行了一段时间后报错"The total number of locks exceeds ...

  4. Vue + ElementUI的电商管理系统实例01 登录表单

    效果图: 1.首先来根据Element网站实现布局: <template> <div class="login_container"> <div cl ...

  5. git和GitHub初级

    使用方式: 一种是本地创建一个文档, 然后在github上创建一个仓库, 在上传上去 一种是从仓库下载代码, 然后在本地编辑, 然后在上传上去 第一种: 首先在linux上创建一个文档, mkdir ...

  6. 019 Android 形状可绘制对象(根据要求绘制图片)+图片选择器

    1.目标效果 绘制颜色渐变的图片 2.实现方法 (1)在app--->res--->drawable 右击drawable文件夹右键,new ---->drawable resour ...

  7. IIS清理缓存

    服务器突然断电经常会导致IIS中web项目运行不起来问题,各种报XXXX.dll加载失败,解决方法重新发布,如果重新发布也不行可能就是IIS缓存的问题了. 清理IIS缓存方法: 进入以下文件夹吧对应的 ...

  8. hdu 6609 区间条件前缀和 + 二分

    题目传送门//res tp hdu 目的 在尾部逐步插入n个元素,求插入第i个元素时,[1,i)内删去多少个元素,可使前缀和[1,i]不大于m 多测Q [1,15] n [1,2e5] m [1,1e ...

  9. 第三章 hash是个啥玩意

    3.10 hash 什么是哈希? hash,一般翻译做散列.杂凑,或音译为哈希,是把任意长度的输入(又叫做预映射pre-image)通过散列算法变换成固定长度的输出,该输出就是散列值.这种转换是一种压 ...

  10. hadoop 完全分布式搭建总结

    完全分布式--------------- 1.配置文件 [core-site.xml] hdfs 地址 fs.defaultFS=hdfs://s129:8020/ [hdfs-site.xml] 副 ...