Vue3项目—项目中使用vue-router进行路由配置及嵌套多级路由

1.配置路由文件 在src文件夹下建立自己的vue-router文件

2.修改入口文件App.vue

<template>
  <el-config-provider namespace="ep">  //Config Provider被用来提供全局的配置选项，让你的配置能够在全局都能够被访问到
    <router-view />
  </el-config-provider>
</template>

<script setup lang='ts'>
import { watchEffect } from 'vue';
import { useMenuStore } from '~/store';
import { isMobile } from '~/core/utils';
const { setUserAgent } = useMenuStore();

watchEffect(() => {
  isMobile() ? setUserAgent('Mobile') : setUserAgent('PC');
});
</script>
<style>
</style>

3.在main.ts中配置路由

//1.引入
import { createApp } from 'vue';
import App from './App.vue';
import router from './router/';

import store from '~/store';
const app = createApp(App);

// console.log(app.config.globalProperties.$message);
app.use(ElementPlus, { locale });
app.use(router).use(store).mount('#app');

4.在views下新建economy文件夹，并在该文件夹下新建category、commodity、dressing三个文件夹。每个文件夹下分别新建一个index.vue文件，并在每个vue文件下撰写相关代码，目录如下。

5.打开router文件夹下的index.ts文件，将刚新建的economy文件夹引入，配置router/index.ts文件

<!--src/router/index.ts-->
import { createRouter, createWebHistory } from 'vue-router';
import Layout from '~/layout/index.vue';
import { expert, pgcScene, officialWeb, avatar, aams, economy, common, activity, customer } from './modules/index';

const router = createRouter({
  history: createWebHistory(), //路由模式
  routes: [
    {
      //页面逻辑
      path: '/',     //首页路径
      name: 'Layout',
      component: Layout,
      redirect: '/welcome',   //重定向
      // 嵌套路由配置
      children: [
        expert,
        pgcScene,
        officialWeb,
        avatar,
        aams,
        economy,
        common,
        activity,
        customer,
        {
          path: '/welcome',
          name: 'welcome',
          component: () => import('~/views/welcome/index.vue')   //动态引入
        }
      ]
    },
    {
      path: '/login',
      name: 'Login',
      component: () => import('~/views/login/index.vue')
    },
    {
      path: '/oss',
      name: 'Oss',
      component: () => import('~/views/Oss/index.vue')
    },
    {
      path: '/:pathMatch(.*)*',
      name: 'NotFound',
      component: () => import('~/views/404.vue')
    }

  ]
});

export default router;

6.在router下新建一个modules文件夹，该文件夹放置嵌套路由有关的子路由配置情况。接下来，在router/modules下新建一个index.ts文件和economy.ts文件，目录如下。

7.打开router/modules文件夹下的economy.ts文件，将views/economy文件夹下新建的category、commodity、dressing三个文件夹的index.vue引入，配置router/modules/economy.ts代码如下：

<!--src/router/modules/economy.ts-->
import { RouteRecordRaw, RouterView } from 'vue-router';
const economy: RouteRecordRaw = {
  path: '/economy',
  component: RouterView,
  redirect: '/economy/category',  //重定向
  meta: {
    title: 'Economy',
    addBreadCrumb: false  
  },
  //二级路由
  children: [
    {
      path: 'category',
      name: 'category',
      component: () => import('~/views/economy/category/index.vue'),  //动态路由
      meta: {
        title: '类目管理'   //嵌套路由的title标签
      }
    },
    {
      path: 'commodity',
      name: 'commodity',
      component: () => import('~/views/economy/commodity/index.vue'),
      meta: {
        title: '商品管理'
      }
    },
    {
      path: 'dressing',
      name: 'dressing',
      component: () => import('~/views/economy/dressing/index.vue'),
      meta: {
        title: '搭配方案'
      }
    }
  ]
};
export default economy;

之后打开router/modules下的index.ts文件，将嵌套路由economy.ts导出，router/modules/index.ts的代码如下：

<!--router/modules/index.ts-->
import expert from './expert';
import pgcScene from './pgcScene';
import officialWeb from './officialWeb';
import avatar from './avatar';
import aams from './aams';
import economy from './economy';
import common from './common';
import activity from './activity';
import customer from './customer';
export {
  expert,
  pgcScene,
  officialWeb,
  avatar,
  aams,
  economy,
  common,
  activity,
  customer
};

注意：项目中嵌套路由需要导出才能访问！ 效果如下：