6、Vue 3 - Vue Router 使用实录 : 命名嵌套路由的使用

一个组件中需要使用多个 router-view 时，可以为路由配置一个名字。

1、为路由配置名字

src/router/index.ts

import { createRouter, createWebHistory } from "vue-router"

const router = createRouter({
    history: createWebHistory(),
    routes:[
		...
        
        {
            path:'/home',
            name:'home',
            component: () => import('@/views/HomeView.vue'),
            meta:{
                'title':'首页',
            },
            children:[
                {
                    path:'/home/contact',
                    name:'联系我',
                    components: {
                        contact:() => import('@/views/ContactView.vue')
                    }
                },
                {
                    path:'/home/category',
                    name:'分类',
                    components: {
                        category:() => import('@/views/CategoryView.vue')
                    }
                }
            ]
        }
        ...
    ]
})

export default router

2、多 router-view 使用

src/views/HomeView.vue

<template>
    <div class="container bg-primary p-5 text-white">首页</div>


    <div class="bg-success py-5">
        <p class="text-center text-white">嵌套路由</p>
        <!--多个渲染嵌套路由-->
        <router-view name="contact"></router-view>
    </div>

    <div class="bg-success py-5">
        <p class="text-center text-white">嵌套路由</p>
        <!--多个渲染嵌套路由-->
        <router-view name="category"></router-view>
    </div>

</template>