vue-router命名视图的使用讲解
作者：muzidigbig 发布时间：2024-04-09 10:59:52
标签：vue,vue-router,命名视图
有时候想同时（同级）展示多个视图，而不是嵌套展示，例如创建一个布局，有 sidebar（侧导航） 和 main（主内容） 两个视图，这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果 router-view 没有设置名字，那么默认为 default。
如果按照他解释的这么简单的话，完全可以在根组件app.vue里直接引入sidebar组件，注册，渲染。没必要多此一举。既然可以在route.config.js里面灵活配置，那就可以灵活的用。官网的例子：
<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>
const router = new VueRouter({
routes: [
{
path: '/',
components: { default: Foo, a: Bar, b: Baz }
}
]
})
在app.vue里面可以多注册几个命名视图，就可以
<template>
<div id="app">
<router-view></router-view>
<router-view name="nav"></router-view>
<router-view name="side"></router-view>
</div>
</template>
{
path: '/home',
name: 'Home',
components: {
default: Home,
nav: Nav,//不给的话就不渲染
side: Side
},
children: [
{ path: '/', component: Home },//不给的话就匹配不到子组件，就不渲染
{ path: 'post', component: Post }
]
}
一、简单的命名视图（就是点击不同的路由跳转后来实现显示多个组件内容）
效果：
二、嵌套路由视图（同时满足嵌套路由的规则，还要满足视图的规则）
若有不足请多多指教！希望给您带来帮助！
来源：https://blog.csdn.net/muzidigbig/article/details/83717244
0
投稿猜你喜欢
- 今天，启动MySQL服务器失败，如下所示：[root@spark01 ~]# /etc/init.d/mysqld startStartin
- php 生成短网址 原理： 1.将原网址做crc32校验，得到校验码。 2.使用sprintf('％u') 将校验码转为无符
- Linux添加mysql系统环境变量昨天安装完mysql后，直接在export PATH上面一行，增加了export PATH=/usr/l
- 起因修改了表结构以后执行python3 manage.py migrate 报错:django.db.utils.OperationalEr
前言模糊查询是数据库的基本操作之一，实现对给定的字符串是否与指定的模式进行匹配。如果字符完全匹配，可以用=等号表示，如果部分匹配可认为是一种- 概述 -------------------------------------------------------------------
- 一、问题说明首先，运行下述代码，复现问题：# -*-coding:utf-8-*-import reimport requestsfrom
- 前言将Selenium程序编写为 .bat 可执行文件，从此一键启动封装好的Selenium程序，省时省力还可以复用，岂不美哉应用场景写好
- 或者你还有其它的sysadmin权限的账号，你可以用此账号登录，重置SA密码。 但是在以下情况下，怎么办呢？1. SA密码丢失或者SA账号被
- 假设有如下目录结构：-- dir0| file1.py| file2.py| dir3| file3.py| dir4| file4.pyd
- 在程序实际应用中，少不了要进行字符串拼接的操作。下面介绍一下Python语言中四种字符串拼接的方式。1. 算术运算符拼接在Python中算术
- 关于窗口函数的基础，请看文章SQL窗口函数取值窗口函数可以用于返回窗口内指定位置的数据行。常见的取值窗口函数如下：LAG函数可以返回窗口内当
- 1.使用前先要安装 yagmailpip install yagmail -i https://pypi.douban.com/simple
- 这篇文章主要介绍了Python文本处理简单易懂方法解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋
- 农历新年将至，支付宝红包打了一仗，微信在朋友圈屏蔽了它的分享，但单防守还不行，进攻才是最好的防守。昨日，微信支付现金红包接口正式开放，只需开
- 1. 语句块：{ }之间的部分即为BLOCK语句块。2. 条件语句：if ( expression ) BLOCK;if ( e
- Function Comma(str)If Not(IsNumeric(str)) Or
- 本文实例讲述了Python使用pyautogui模块实现自动化鼠标和键盘操作。分享给大家供大家参考，具体如下：一、pyautogui模块简要
- 数据类型判断在python（版本3.0以上）使用变量，并进行值比较时。有时候会出现以下错误：TypeError: unorderable t
- 如何判断年份是否为闰年闰年：所谓闰年即能被4整除，但不能被100整除的年份，或者能被400整除的年份。def Year():
