Vue3-31-路由-RouterView的name属性的作用

作用描述

<router-view> 标签是用来渲染路由对应的组件的位置;

默认情况下,一个路由是只对应一个组件的。

但是,可以通过给 <router-view> 指定 name 属性的方式,实现同时渲染多个组件的效果。

这也叫做 命名视图

注意点

1、因为一个路由需要对应多个组件,所以在进行路由配置时需要使用 components 来代替 component;
2、在使用<router-view> 时指定 name 属性,不指定的,默认是 default
3、components 中使用 key-value 的形式配置组件,
key : 就是 <router-view> 的 name 属性的值
value : 就是要渲染的组件

复制代码
路由中的配置就像下面这样 :

  {
        path:'/showAllComponents',
        name:'aroute',
        components:{ // 指定多个组件
            default : componentA,  // 默认名称 default
            first : componentB, // name = first 的 router-view
            second : componentC  // name = second 的 router-view
        },
       
    },

使用案例

复制代码
项目结构如下 :
projectName
	| -- src
		| -- App.vue # 根组件,A B C 三个组件都在这里展示
		| -- componentA.vue
		| -- componentB.vue
		| -- componentC.vue
		| -- router.ts # 路由配置的文件
		| -- mian.ts # 程序的入口ts文件
	| -- index.html # 项目页面入口文件

下面的案例代码只展示重点的部分:

router.ts 路由配置

ts 复制代码
// 导入 定义路由的两个方法
import {createRouter,createWebHistory}  from 'vue-router'

// 引入两个组件
import componentA from "./componentA.vue";
import componentB from "./componentB.vue";
import componentC from "./componentC.vue";

// 声明路由跳转的路径与组件的对应关系
const routsList = [
    {
        path:'/showAllComponents',
        name:'aroute',
        components:{
            default : componentA,
            first : componentB,
            second : componentC
        },
    },
]

// 创建路由的实例对象
const routerConfigObj = createRouter({
    history:createWebHistory('abc'), // 带一个参数,表示是路由的一个前缀
    routes:routsList // 指定路由的配置列表
})

// 导出路由的对象
export default routerConfigObj;

App.vue 根组件内容

html 复制代码
<template>
    <div class="basediv">
      
        APP.vue 中的 msg : {{ msg }}
        
        <br><br><br>
        <!-- router-view 进行目标组件的展示 -->
        <router-view></router-view>
        <router-view name="first"></router-view>
        <router-view name="second"></router-view>
    
    </div>
   
</template>
    
<script setup lang="ts">

	// 引入 provide 方法
    import { ref } from 'vue'

    // 声明父组件的一个变量
    const msg = ref('这是App根组件的msg变量')

</script>
    
<style scoped>
    .basediv{
        width: 600px;
        height: 400px;
        border: 1px solid red;
    }
</style>

运行效果

相关推荐
qq_308562311 天前
vue3 中引入tinymce富文本
vue3·富文本·tinymce
sen_shan3 天前
Vue3+Vite+TypeScript+Element Plus开发-02.Element Plus安装与配置
前端·javascript·typescript·vue3·element·element plus
路光.3 天前
Vue3实现锚点定位
前端·javascript·vue.js·vue3
wocwin7 天前
uniapp微信小程序封装navbar组件
微信小程序·uni-app·vue3·组件封装·navbar
留白声9 天前
uniapp主题切换功能,适配H5、小程序
前端·css·小程序·uni-app·vue3·主题切换
dr李四维12 天前
uniapp从 vue2 项目迁移到 vue3流程
javascript·vue.js·uni-app·vue3·vue2·vuex·vue迁移
Jiaberrr16 天前
Vue 3 中使用 vue - pdf - embed + vue3 - pdfjs 在线预览 PDF
前端·javascript·vue.js·前端框架·pdf·vue3
努力做大神18 天前
uniapp vue3项目定义全局变量,切换底部babar时根据条件刷新页面
uni-app·vue3
柒@宝儿姐20 天前
如何判断一个项目用的是哪个管理器
前端·javascript·vue.js·vue3
爱看书的小沐20 天前
【小沐学Web3D】three.js 加载三维模型(vue3)
javascript·vue·vue3·webgl·three.js·opengl·web3d