有时候想同时（同级）展示多个视图，而不是嵌套展示，例如创建一个布局，有 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. 盘一盘Tidyverse| 筛行选列之select，玩转列操作

    原文链接:https://mp.weixin.qq.com/s/ldO0rm3UM_rqlFnU3euYaA 2020年,开封 <R 数据科学>R for data science,系统学 ...

  2. AVR单片机教程——PWM调光

    本文隶属于AVR单片机教程系列.   PWM 两位数码管的驱动方式是动态扫描,每一位都只有50%的时间是亮的,我们称这个数值为其占空比.让引脚输出高电平点亮LED,占空比就是100%. 在驱动数码管时 ...

  3. 搞定SpringBoot多数据源(3)：参数化变更源

    目录 1. 引言 2. 参数化变更源说明 2.1 解决思路 2.2 流程说明 3. 实现参数化变更源 3.1 改造动态数据源 3.1.1 动态数据源添加功能 3.1.2 动态数据源配置 3.2 添加数 ...

  4. Pycharm运行/调试程序说明

    1.字体调整(optional) File -> Settings ->Editor->Colors & Fonts -> Size 22 2.打开程序所在文件夹hw5 ...

  5. swift开发度假计划app

    用swift开发一个完整的度假地app,设计到布局.数据绑定.数据编辑.页面导航等:适合初学者: github:(git@github.com:Frankltf/ios-swift-app.git)

  6. CTF--HTTP服务--SQL注入POST参数-注入HTTP报文

    开门见山 1. 扫描靶机 2. 对靶机开放端口进行扫描 3. 扫描全部信息 4. 用nikto -host 探测敏感信息 5. 用dirb探测敏感目录 6. 打开一些目录探测出的网页进行查看 7. 再 ...

  7. 线程池技术之：ThreadPoolExecutor 源码解析

    java中的所说的线程池,一般都是围绕着 ThreadPoolExecutor 来展开的.其他的实现基本都是基于它,或者模仿它的.所以只要理解 ThreadPoolExecutor, 就相当于完全理解 ...

  8. SpringCloud与微服务Ⅲ --- SpringCloud入门概述

    一. 什么是SpringCloud SpringCloud基于SpringBoot提供了一套微服务解决方案,包括服务注册与发现,配置中心,全链路监控,服务网关,负载均衡,熔断器等组件,除了基于NetF ...

  9. Java 设计模式之抽象工厂模式

    抽象工厂模式(Abstract Factory Pattern)是围绕一个超级工厂创建其他工厂.该超级工厂又称为其他工厂的工厂.这种类型的设计模式属于创建型模式,它提供了一种创建对象的最佳方式. 在抽 ...

  10. iOS 利用UICollectionView做一个无限循环广告栏

    一.效果图 左右丝滑滑动,并且有缩放动画. 二.分析和思路 1. 为什么选择用UICollectionView去做上面的效果? 首先无限效果永远是表现出来的,而不是程序里面创建了无数个view,如何做 ...