本文将介绍以下内容安装依赖创建布局组件配置路由使用嵌套路由完整示例

上篇《Vue3项目实践-第六篇（pinia 数据持久化、页面布局）》布局页基本上大致出来了，本次直接完善下。

安装依赖

首先，确保已经安装了 Element Plus 、Pinia、router。可以使用以下命令通过npm安装它们：

npm install element-plus pinia vue-router

创建一个布局组件，它将包含页面的整体布局，例如导航栏、侧边栏和页脚。你可以在该组件中使用Element Plus的组件来构建布局。

<template>    <div class="layout">        <el-container class="layout-container">            <el-aside class="aside"> Aside </el-aside>            <el-container>                <el-header> Header </el-header>                <el-main> Main </el-main>            </el-container>        </el-container>    </div></template>

在Vue应用程序中配置嵌套路由。可以使用Vue Router来实现路由功能。

import { createRouter, createWebHistory } from "vue-router";import defaultLayout from '@/layout/Default.vue';const routes = [    {        path: '/',        name: 'Default',        component: defaultLayout,        children: [            {                path: '/home',                name: 'Home',                component: () => import("@/views/Home.vue")            },            {                path: '/about',                name: 'About',                component: () => import("@/views/About.vue")            }        ]    },];const router = createRouter({    history: createWebHistory(),    routes: routes,});export default router;

在上面的代码中，"/"路径使用布局组件作为父组件，并定义了一些子路由，例如主页和关于页面。

使用嵌套路由

现在我们可以在布局组件中使用<router-view></router-view>来渲染嵌套路由的组件。嵌套路由将根据当前路径匹配的子路由来动态渲染。

<template>    <div class="layout">        <el-container class="layout-container">            <el-aside class="aside"> Aside  </el-aside>            <el-container class="content">                <el-header> Header </el-header>                <div class="main">                    <router-view></router-view>                </div>            </el-container>        </el-container>    </div></template>

在上面布局组件的示例中，<router-view></router-view>将渲染当前匹配的子路由组件，例如Home或About组件。

这就是使用Vue 3和Element Plus创建带有嵌套路由的布局页面的基本操作。

完整示例

完整的示例，展示如何使用Vue 3和Element Plus创建带有嵌套路由的布局页面：

main.ts

import { createApp } from 'vue'import App from './App.vue'import router from '@/router';import ElementPlus from 'element-plus'import 'element-plus/dist/index.css'import { pinia } from '@/store';createApp(App)    .use(ElementPlus)    .use(router)    .use(pinia)    .mount('#app')

// /src/router/index.tsimport { createRouter, createWebHistory } from "vue-router";import LoginPage from '@/views/Login.vue';import defaultLayout from '@/layout/Default.vue';import { authStore } from '@/store/modules/auth';const routes = [    {        path: '/',        name: 'Default',        component: defaultLayout,        children: [            {                path: '/home',                name: 'Home',                component: () => import("@/views/Home.vue")            },            {                path: '/about',                name: 'About',                component: () => import("@/views/About.vue")            }        ]    },    {        path: '/login',        name: 'Login',        component: LoginPage    }];const router = createRouter({    history: createWebHistory(),    routes: routes,});const whiterList = ['/login'];router.beforeEach((to, from, next) => {    // 获取Pinia store的实例    const userStore = authStore();    console.log('router.beforeEach: begin ');    console.log('to:', to);    console.log('from:', from);    console.log('userStore.isAuth:', userStore.isAuth);    console.log('router.beforeEach: end ');    if (whiterList.indexOf(to.path) !== -1) {        next();        return;    }    // 判断是否需要进行登录验证    if (!userStore.isAuth) {        next('/login');        return;    }    // 如果不需要登录验证或用户已登录，则继续路由跳转    next();});export default router;

// /src/store/index.tsimport { createPinia } from 'pinia';import { createPersistedState } from 'pinia-plugin-persistedstate';export const pinia = createPinia().use(createPersistedState());

// /src/store/modules/auth.tsimport { defineStore } from 'pinia';export const authStore = defineStore('auth', {    state: () => ({        isAuth: false,    }),    actions: {        login() {            // 处理登录逻辑            // 在登录成功后设置 isAuth 状态为 true            this.isAuth = true;        },        logout() {            // 推出登录            // 在登录成功后设置 isAuth 状态为 true            this.isAuth = false;        }    },    persist: true});

<!--/src/views/home.vue--><template>  <h1>Home Page</h1>  <p>    {{ pageData }}  </p></template><script lang="ts" setup>import { ref } from 'vue';import axios from 'axios';const pageData = ref({});const load = async () => {  console.log('执行请求');  try {    const { data } = await axios.get('./data/page.json');    console.log(data);    pageData.value = data;  } catch (error) {    console.error(error);  }}load();</script>

<!-- /src/views/about.vue --><template>    <h1>About Page</h1>  </template>  <script lang="ts" setup>  </script>

<template>    <div class="layout">        <el-container class="layout-container">            <el-aside class="aside">                <el-scrollbar>                    <div class="head">                        <div>                            <span>Vue3 Admin</span>                        </div>                    </div>                    <el-menu                         :default-openeds="['2', '3']"                         :default-active="activeMenu"                         @select="handleMenuSelect"                        router>                        <el-menu-item index="/home">Home</el-menu-item>                        <el-menu-item index="/about">About</el-menu-item>                        <el-sub-menu index="1">                            <template #title>                                <el-icon>                                    <message />                                </el-icon>Navigator One                            </template>                            <el-menu-item-group>                                <template #title>Group 1</template>                                <el-menu-item index="1-1">Option 1</el-menu-item>                                <el-menu-item index="1-2">Option 2</el-menu-item>                            </el-menu-item-group>                            <el-menu-item-group title="Group 2">                                <el-menu-item index="1-3">Option 3</el-menu-item>                            </el-menu-item-group>                            <el-sub-menu index="1-4">                                <template #title>Option4</template>                                <el-menu-item index="1-4-1">Option 4-1</el-menu-item>                            </el-sub-menu>                        </el-sub-menu>                        <el-sub-menu index="2">                            <template #title>                                <el-icon><icon-menu /></el-icon>Navigator Two                            </template>                            <el-menu-item-group>                                <template #title>Group 1</template>                                <el-menu-item index="2-1">Option 1</el-menu-item>                                <el-menu-item index="2-2">Option 2</el-menu-item>                            </el-menu-item-group>                            <el-menu-item-group title="Group 2">                                <el-menu-item index="2-3">Option 3</el-menu-item>                            </el-menu-item-group>                            <el-sub-menu index="2-4">                                <template #title>Option 4</template>                                <el-menu-item index="2-4-1">Option 4-1</el-menu-item>                            </el-sub-menu>                        </el-sub-menu>                        <el-sub-menu index="3">                            <template #title>                                <el-icon>                                    <setting />                                </el-icon>Navigator Three                            </template>                            <el-menu-item-group>                                <template #title>Group 1</template>                                <el-menu-item index="3-1">Option 1</el-menu-item>                                <el-menu-item index="3-2">Option 2</el-menu-item>                            </el-menu-item-group>                            <el-menu-item-group title="Group 2">                                <el-menu-item index="3-3">Option 3</el-menu-item>                            </el-menu-item-group>                            <el-sub-menu index="3-4">                                <template #title>Option 4</template>                                <el-menu-item index="3-4-1">Option 4-1</el-menu-item>                            </el-sub-menu>                        </el-sub-menu>                    </el-menu>                </el-scrollbar>            </el-aside>            <el-container class="content">                <el-header> Header </el-header>                <div class="main">                    <router-view></router-view>                </div>                <Footer />            </el-container>        </el-container>    </div></template><script setup lang="ts">import { ref } from 'vue';import { Menu as IconMenu, Setting, } from '@element-plus/icons-vue'import { useRouter } from 'vue-router';const router = useRouter();console.log('router.currentRoute', router.currentRoute.value.path);const activeMenu = ref(router.currentRoute.value.path);const handleMenuSelect = (index: any)=> {    activeMenu.value = index; // 更新当前激活的菜单项    console.log('router', router);    router.push(index); // 使用路由导航跳转到对应的路由}</script><style scoped lang="scss">.layout-container .el-header {    position: relative;    color: var(--el-text-color-primary);}.head {    display: flex;    align-items: center;    justify-content: center;    height: 60px;}.head>div {    display: flex;    align-items: center;}.head img {    width: 50px;    height: 50px;    margin-right: 10px;}.head span {    font-size: 20px;    /* color: #ffffff; */}.layout-container .el-aside {    color: var(--el-text-color-primary);}.layout-container .aside {    width: 200px !important;}// .layout-container .el-menu {//     border-right: none;// }.layout-container .el-main {    padding: 0;}.layout-container .toolbar {    display: inline-flex;    align-items: center;    justify-content: center;    height: 100%;    right: 20px;}.layout {    display: flex;    height: 100vh;    .el-container {        padding: 0;        margin: 0;        height: 100vh;    }    .el-header,    .el-footer,    .el-main,    .el-aside {        display: flex;        justify-content: center;        align-items: center;    }    .el-header {        background-color: var(--el-color-primary-light-7);        color: var(--el-text-color-primary);        text-align: center;        line-height: 160px;    }    .el-aside {        background-color: var(--el-color-primary-light-8);        color: var(--el-text-color-primary);        text-align: center;    }    .el-main {        background-color: var(--el-color-primary-light-9);        color: var(--el-text-color-primary);        text-align: center;        line-height: 160px;        // height: 150px;    }}</style>

效果：