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

    一.安装 # 1. 更新 sudo apt-get update # 2. 安装 sudo apt-get install -y mongodb # 3. 查看是否安装成功 # a. 服务状态 sud ...

  2. SpringMVC简单使用教程

    一.SpringMVC简单入门,创建一个HelloWorld程序 1.首先,导入SpringMVC需要的jar包. 2.添加Web.xml配置文件中关于SpringMVC的配置 <!--conf ...

  3. umake ide -h

    umake ide -husage: umake ide [-h]                 {netbeans,idea,clion,eclipse,atom,idea-ultimate,ec ...

  4. 之前见汤姆大叔 写过一系列的 js 深入理解 呢 很是感觉经典

    最近要把这些给翻个遍 加油  js 隐式全局变量 读后感 1:js 没有变量名称是否重复定义的检查,在cshrp里有这样的检查, 没有变量名称重复的检查,这样 当变量名称 重复定义的时候 相同命名的变 ...

  5. QDialog

    QDialog设置setWindowFlags(Qt::FramelessWindowHint);后,dialog弹不出来,界面不显示: 在继承一个QDialog类并设置窗口为无边框时,如果调用set ...

  6. SpringBoot分布式篇Ⅶ --- 整合Dubbo

    在分布式系统中, 国内常用zookeeper+dubbo组合,而Spring Boot推荐使用全栈的Spring,Spring Boot,Spring Cloud. 分布式系统: 一.Zookeepe ...

  7. ArrayList与LinkedList比较

    ArrayList与LinkedList比较 1.实现方式 ArrayList内部结构为数组,定义如下: /** * The array buffer into which the elements ...

  8. AcWing 785.快速排序

    AcWing 785.快速排序题解 题目描述 给定你一个长度为n的整数数列. 请你使用快速排序对这个数列按照从小到大进行排序. 并将排好序的数列按顺序输出. 输入格式 输入共两行,第一行包含整数 n. ...

  9. AS中加载gradle时出现Gradle sync failed: Could not find com.android.tools.build:gradle.的错误

    时间:2019/12/7 这次接着整理加载gradle时出现的错误 出现的错误: Gradle sync failed: Could not find com.android.tools.build: ...

  10. npm、node版本升级与淘宝镜像

            npm --version  ==   npm -v       查看npm版本            node -v  查看node版本         升级npm版本   npm  ...