文档章节

vueRouter-命名视图

tianyawhl
 tianyawhl
发布于 2017/09/12 10:37
字数 267
阅读 8
收藏 0

有时候想同时展示多个视图,而不是嵌套展示,例如创建一个布局,有sidebar(侧导航)和(主内容)2个视图,这个时候命名视图就派上用场了。
你可以在界面中拥有多个单独命名的视图,而不是只有一个单独的出口,如果router-view没有设置名字,那么就默认为default
<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>
一个视图使用一个组件渲染,因此对于同个路由,多个视图就需要多个组件,确保正确使用components

<body class="">
    <script src="../js/vue.js"></script>
    <script src="../js/vue-router.js"></script>
    <div id="app">
        <h1>Named Views</h1>
        <ul>
            <li>
                <router-link to="/">/</router-link>
            </li>
            <li>
                <router-link to="/other">other</router-link>
            </li>
        </ul>
        <router-view class="view one"></router-view>
        <router-view class="view two" name="a"></router-view>
        <router-view class="view three" name="b"></router-view>
    </div>
    <script>
    const Foo = { template: `<div>foo</div>` }
    const Bar = { template: `<div>bar</div>` }
    const Baz = { template: `<div>baz</div>` }
    const router = new VueRouter({
        //mode:"history",
        routes: [{
                path: "/",
                components: {
                    default: Foo,
                    a: Bar,
                    b: Baz
                }
            },
            {
                path: "/other",
                components: {
                    default: Baz,
                    a: Bar,
                    b: Foo
                }
            }
        ]
    })

    const app = new Vue({ router }).$mount("#app")
    </script>
</body>

 

© 著作权归作者所有

共有 人打赏支持
上一篇: vue cli安装步骤
tianyawhl
粉丝 4
博文 231
码字总数 118197
作品 0
常州
前端工程师
私信 提问
Vue-Router的使用方法

使用 Vue.js 做项目的时候,一个页面是由多个组件构成的,所以在跳转页面的时候,并不适合用传统的 href,于是 vue-router 应运而生。 路由,其实就是指向的意思,当我点击页面上的home按钮时...

peakedness丶
2018/11/08
0
0
详解vue-router 初始化时做了什么

vue router 的初始化使用步骤 我们首先来看 vue-router 的使用步骤,然后再分别去看各个步骤都发生了什么。 使用 vue-router 需要经过一下几个步骤: 引入 vue-router: 利用 vue 的插件机制...

peakedness丶
2018/11/20
0
0
VueRouter 源码深度解析

该文章内容节选自团队的开源项目 InterviewMap。项目目前内容包含了 JS、网络、浏览器相关、性能优化、安全、框架、Git、数据结构、算法等内容,无论是基础还是进阶,亦或是源码解读,你都能...

夕阳
2018/10/28
0
0
Vue中路由管理器Vue Router使用方式(一)

一、在模块编程中安装VueRouter 1.Npm安装vue-router 2.在main.js中引用并使用VueRouter 3.定义路由,创建路由实例 4.注册路由实例 二、Vue Router基础使用示例 1.App.vue 页面定义,使用rou...

tianma3798
2018/10/16
0
0
解析Vue-router相关基础知识及工作原理

这篇文章主要介绍了vue-router相关基础知识及单页面应用的工作原理,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下。如有不足之处,欢迎批评指正。 当你要把 vue-...

前端攻城老湿
2018/12/27
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Nextjs+React非页面组件SSR渲染

@随风溜达的向日葵 Nextjs Nextjs是React生态中非常受欢迎的SSR(server side render——服务端渲染)框架,只需要几个步骤就可以搭建一个支持SSR的工程(_Nextjs_的快速搭建见Next.js入门)...

随风溜达的向日葵
58分钟前
0
0
如何在 Linux 系统查询机器最近重启时间

在你的 Linux 或类 UNIX 系统中,你是如何查询系统上次重新启动的日期和时间?怎样显示系统关机的日期和时间? last 命令不仅可以按照时间从近到远的顺序列出该会话的特定用户、终端和主机名...

来来来来来
今天
3
0
Redis协议是什么样的

前言 我们用过很多redis的客户端,有没有相过自己撸一个redis客户端? 其实很简单,基于socket,监听6379端口,解析数据就可以了。 redis协议 解析数据的过程主要依赖于redis的协议了。 我们...

春哥大魔王的博客
今天
6
0
乱入Linux界的我是如何学习的

欢迎来到建哥学Linux,咳!咳!咳!开个玩笑哈,我是一个IT男,IT界的入门选手,正在学习Linux。 在之前,一直想进军IT界,学习IT技术,但是苦于没有人指导,也不知道学什么,最开始我自己在...

linuxCool
今天
4
0
携程Apollo统一配置中心的搭建和使用(java)

一.Apollo配置中心介绍 1、What is Apollo 1.1 Apollo简介 Apollo(阿波罗)是携程框架部门研发的开源配置管理中心,能够集中化管理应用不同环境、不同集群的配置,配置修改后能够实时推送到...

morpheusWB
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部