有时候想同时（同级）展示多个视图，而不是嵌套展示，例如创建一个布局，有 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. macOS 10.11.* 安装scrapy

    1.安装brew,然后修改brew源为某高校 2.更新python brew install python 3.安装pip 4.安装scrapy,这里肯定会有一个坑,之前在网上看到10.11开启了什么 ...

  2. 如何使用F4的IRAM2内存

    在使用KEIL做F4的项目的时候发现RAM区有片上IRAM2选项,查了datesheet后发现这块是CCM内存区 CCM内存是在地址0x1000000映射的64KB块,只提供CPU通过数据D总线进行访 ...

  3. jenkins 配置ssh密钥登录

    1.找到一台服务器执行 ssh-keygen -t rsa 会在目录/root/.ssh生成id_rsa私钥.id_rsa.pub公钥,将公钥的内容写入到同目录下的authorized_keys文件( ...

  4. java 数组2

    一.创建异常 1.空指针异常 2.超出索引范围 二.遍历 for循环 三.求数组中的最大值 package cn.wt.day05.demon02; public class DemonArray03 ...

  5. springboot 报错nested exception is java.lang.IllegalStateException: Failed to check the status of the service xxxService No provider available for the service

    spring: dubbo:#关闭所有服务的启动时检查:(没有提供者时报错) consumer: check: false timeout: 3000

  6. ubutun安装停留在界面

    这几天都在折腾,都在出问题记录一下 ubuntu安装时停留在界面,怎么办解决方法:重新开机,光标选中“Install Ubuntu” ,按“e”,进入grub界面,将倒数第二行中的“quiet spl ...

  7. UML--->活动图梳理

    活动图梳理 活动图 概述 活动图是UML用于对系统的动态行为建模的另一种常用工具,它描述活动的顺序,展现从一个活动到另一个活动的控制流,常常用于描述业务过程和并行处理过程,活动图在本质上是一种流程图. ...

  8. Linux下安装Oracle后重启无法登录数据库ORA-01034:ORACLE not available

    Linux下安装了数据库,安装完成后可以用,今天启动就不能用了,提示Oracle not available,后来查找资料,据说是oracle服务没有打开.如下方式可以解决问题. [root@root ...

  9. Docker快速上手之部署SpringBoot项目

    Docker是基于Go语言实现的云开源项目. Docker的主要目标是“Build,Ship and Run Any App,Anywhere”,也就是通过对应用组件的封装.分发.部署.运行等生命周期 ...

  10. React报错Failed prop type: Invalid prop `component` of type `object` supplied to `Route`, expected `function`

    引言 最近在忙毕业设计,博客也很久没更新了,毕业设计使用vue做了一个校园寻物网站,现在开始学Raect,记录一下自己遇到问题,react-redux的connect方法使得组件与Redux建立了联系 ...