有时候想同时（同级）展示多个视图，而不是嵌套展示，例如创建一个布局，有 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. Linux 断网安装MySQL5.x操作步骤

    1.下载MySQL安装包 由于官网下载比较慢,暂时我这边采用的方法是通过网易云的centos镜像下载的地址是 http://mirrors.163.com/mysql/Downloads/MySQL- ...

  2. Mysql.复选条件的查询

    场景:有筛选条件 联盟:1.复联 2.正义联盟 3.猛禽小队,条件可多选,求查询结果. name league 飞人 复联,正义联盟 黑人 复联,正义联盟,猛禽小队 打手枪的男人 复联,猛禽小队 深井 ...

  3. unbuntu18.04安装启用splash

    官网:https://splash.readthedocs.io/en/stable/ 1.安装Docker https://www.cnblogs.com/wt7018/p/11880666.htm ...

  4. 如何清理 Docker 占用的磁盘空间

    Docker 很占用空间,每当我们运行容器.拉取镜像.部署应用.构建自己的镜像时,我们的磁盘空间会被大量占用. 如果你也被这个问题所困扰,咱们就一起看一下 Docker 是如何使用磁盘空间的,以及如何 ...

  5. Kettle自定义jar包供javascript使用

    我们都知道 Kettle 是用 Java 语言开发,并且可以在 JavaScript 里面直接调用 java 类方法.所以有些时候,我们可以自定义一些方法,来供 JavaScript 使用. 本篇文章 ...

  6. JavaFx图形界面开发

    相关学习教程:http://www.javafxchina.net/blog/docs/ ,makery写的教程:https://code.makery.ch/zh-cn/library/javafx ...

  7. springBoot的事件机制---GenericApplicationListener用法

    springBoot的事件机制---GenericApplicationListener用法 什么是ApplicationContext? 它是Spring的核心,Context我们通常解释为上下文环 ...

  8. linux--->阿里云centos6.9安装yii2报错

    阿里云centos6.9安装yii2报错 错误显示:Warning: require(/vendor/autoload.php): failed to open stream: No such fil ...

  9. 老哈佛H3的空调控制器的维修记录

    这部哈弗车是2005年出厂的,应该差不多是第一批了吧,小毛病很多了.夏天到了,空调也不能启动,灯不亮,按键没反应令我很是着急.于是开始研究. 这款空调的控制器在cd机中控下面,需要拆中控取出.是一个黑 ...

  10. Shell考题中级篇

    写脚本实现,可以用shell.perl等.把文件b中有的,但是文件a中没有的所有行,保存为文件c,并统计c的行数. grep -v -x bbb -f aaa > ccc && ...