有时候想同时（同级）展示多个视图，而不是嵌套展示，例如创建一个布局，有 sidebar（侧导航） 和 main（主内容） 两个视图，这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果 router-view 没有设置名字，那么默认为 default

<!DOCTYPE html>

<!-- saved from url=(0077)https://keepfool.github.io/vue-tutorials/06.Router/basic/basic_01.html#!/home -->

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>abc</title>

</head>

<body>

    <div id="app">

        <div class="list-group">

            <router-link class="list-group-item" to="/home">Go to Foo</router-link>

            <router-link class="list-group-item" to="/about">Go to Bar</router-link>

        </div>

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

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

    </div>

    <template id="homea">

        <div>

            <h1>Home</h1>

            <p>a</p>

        </div>

    </template>

    <template id="homeb">

        <div>

            <h1>Home</h1>

            <p>b</p>

        </div>

    </template>

    <template id="abouta">

        <div>

            <h1>About</h1>

            <p>a</p>

        </div>

    </template>

    <template id="aboutb">

        <div>

            <h1>About</h1>

            <p>b</p>

        </div>

    </template>

    <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>

    <script src="https://cdn.bootcss.com/vue-router/2.7.0/vue-router.min.js"></script>

    <script>

    homea = { template: '#homea' };

    homeb = { template: '#homeb' };

    abouta = { template: '#abouta' };

    aboutb = { template: '#aboutb' };

    // About = { template: '<div>bar</div>' }

    routes = [{

            path: '/home',

            components: {

                a: homea,

                b: homeb

            }

        },

        {

            path: '/about',

            components: {

                 a: abouta,

                 b: aboutb

            }

        }

    ]

    router = new VueRouter({

        routes: routes // （缩写）相当于 routes: routes

    });

    app = new Vue({

        router: router

    }).$mount('#app');

    </script>

</body>

</html>

注意这样写时不支持的：

{
            path: '/about',
            components: {
                 a: "#abouta",
                 b: "#aboutb"--不能在这里直接用id
            }
        }

vue路由--命名视图的更多相关文章

  1. Vue路由-命名视图实现经典布局

    Vue路由-命名视图实现经典布局 相关Html: <!DOCTYPE html> <html lang="en"> <head> <met ...

  2. vue 中 命名视图的用法

    今天主要记录  vue中命名视图的用法 先奉上官网网址:https://router.vuejs.org/zh/guide/essentials/named-views.html 一般情况下,一个页面 ...

  3. VUE router-view 页面布局 （嵌套路由+命名视图）

    嵌套路由 实际生活中的应用界面,通常由多层嵌套的组件组合而成.同样地,URL 中各段动态路径也按某种结构对应嵌套的各层组件,例如: /user/foo/profile /user/foo/posts ...

  4. vue路由--命名路由

    有时我们通过一个名称来标识一个路由显得更方便一些,特别是在链接一个路由,或者是执行一些跳转的时候.你可以在创建 Router 实例的时候,在 routes 配置中给某个路由设置名称. 我们直接在路由下 ...

  5. [vue]vue路由篇vue-router

    spa单页开发及vue-router基础: https://www.cnblogs.com/iiiiiher/p/9034496.html url两种传参方式 query: $route.query ...

  6. Vue路由讲解

    1>router-link和router-view组件 2>路由配置 a.动态路由 import Home from "@/views/Home.vue"; expor ...

  7. [Vue 牛刀小试]：第十三章 - Vue Router 基础使用再探（命名路由、命名视图、路由传参）

    一.前言 在上一章的学习中,我们简单介绍了前端路由的概念,以及如何在 Vue 中通过使用 Vue Router 来实现我们的前端路由.但是在实际使用中,我们经常会遇到路由传参.或者一个页面是由多个组件 ...

  8. Vue路由嵌套和命名视图

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

  9. Vue学习笔记【29】——Vue路由（命名视图实现经典布局）

    命名视图实现经典布局 标签代码结构:  <div id="app">    <router-view></router-view>    < ...

随机推荐

  1. proxy应用场景

    //场景一:可以修改对象的值let o = { name: 'xiaoming', price: 190 } let d = new Proxy(o,{ get (target,key){ if(ke ...

  2. python 面向对象的内置方法

    要求:了解即可,能用最好 """ 1.print(obj), str(obj), %s % (obj), 都调用obj.__str__()方法,若类中没有找__repr_ ...

  3. asp.net生成店铺推广二维码，二维码中间加logo(源码)

    二维条码比一维条码记载数据量更多,二维码条码是一种高密度.高信息含量的便携式数据文件,是实现证件及卡片等大容量.高可靠性信息自动存储.携带并可用机器自动识读的理想手段.而且可以记载更复杂的数据,比如图 ...

  4. 以其他控制器为目标 在视图中生成输出URL

    结果呢:<a href="/Admin">This targets another controller</a>

  5. selenium2-Python环境搭建

    一.什么是selenium? selenium主要用于web应用的自动化测试,但并不局限于此,它还支持基于所有web的管理任务自动化,且开源免费,多浏览器支持(IE,Mozilla Firefox,S ...

  6. 机器学习-浅谈神经网络和Keras的应用

    概述 神经网络是深度学习的基础,它在人工智能中有着非常广泛的应用,它既可以应用于咱们前面的章节所说的Linear Regression, classification等问题,它还广泛的应用于image ...

  7. Centos 7 最小化Gitlab部署操作

    Gitlab的介绍 gitlab是一个版本控制的集群软件,集成了git.postgresql.Ruby.nginx.redis等重要应用工具: gitlab分为ce和ee版本:CE是社区版,EE是企业 ...

  8. 大数据之Kafka史上最详细原理总结

    Kafka Kafka是最初由Linkedin公司开发,是一个分布式.支持分区的(partition).多副本的(replica),基于zookeeper协调的分布式消息系统,它的最大的特性就是可以实 ...

  9. 2020年大厂Java面试题（基础+框架+系统架构+分布式+实战）

    前言 作为一个Java开发者,Java架构师应该是大家的一个职业目标了吧. 要成为Java架构师,首先你要是一个高级Java工程师,熟练使用各种框架,并知道它们实现的原理.jvm虚拟机原理.调优,懂得 ...

  10. 【WPF学习】第三十八章 行为

    样式提供了重用一组属性设置的实用方法.它们为帮助构建一致的.组织良好的界面迈出了重要的第一步——但是它们也是有许多限制. 问题是在典型的应用程序中,属性设置仅是用户界面基础结构的一小部分.甚至最基本的 ...