1、为什么需要动态路由？

一般开发都是写静态路由，我们为什么要使用动态路由呢？因为动态路由对权限的划分是一个最有效的解决方法，下面我们就开始搭建一个动态路由的项目，使用技术是vite+ts+vue3+pinia+mock,mock主要用于模拟请求接口之后的处理，更接近实际项目

2、创建一个vite项目

创建一个项目之后启动，具体启动过程初始化命令里面都会有提示的这里就不详细讲解了，删除里面的HelloWord.vue文件，这样一个空白项目就有了，下面我们先进行安装需要的插件

3、插件安装

需要安装vue-router、pinia、axios和mock,我这边是使用的yarn安装的，如果使用npm安装也是可以的

安装好插件之后，开始创建文件夹以及需要的文件

4、创建文件夹以及文件

4.1 在src下面新建router/index.ts:

 = [    {        // 路由重定向配置        path: '/',        redirect: '/Home'    }, {        path: '/Home',        component: () => import('../views/Home.vue')    }]// 路由对象const router = createRouter({    history: createWebHashHistory(),//hash路由    routes})export default router

4.2 打开app.vue文件,改成如下代码：

4.4 在main.ts里面引入

这样就可以看到home页面了

4.5 模拟mock数据使用

4.5.1 创建/src/mock/index.ts

 = [    {      url: '/api/test',      method: 'get',      response: () => {          return {              status: 200,              message: 'success',              data: '返回的数据'          }      }    }]export default mock

4.5.2 配置vite.config.ts

要想使用mock，我们还需要在vite.config.ts文件下对mock进行配置，让vite启动的同时启动mock服务。

4.5.3 配置axios

/src/utils/request.ts：此文件为axios配置文件，它将创建一个axios全局单例，由于本项目仅做最简单的演示，所以仅配置baseUrl，实际使用时可根据实际情况添加拦截器等功能。

/src/apis/index.ts：此文件为接口文件，接口统一放到此文件中。

 req({ url: '/api/test', method: 'get' })

home.vue代码修改如下

    
Home
 

在这里就可以看到网络里面有接口请求成功了。

5、配置动态路由

5.1 配置动态路由接口

首先我们先在刚刚创建的mock接口文件/src/mock/index.ts中添加一个返回路由信息的路由接口，如下所示

 = [    {      url: '/api/test',      method: 'get',      response: () => {          return {              status: 200,              message: 'success',              data: 'Hello World'          }      }    },    {      url: '/api/getRoutes',      method: 'get',      response: () => {        const routes = [          {              path: '/Page1',              name: 'Page1',              component: 'Page1/index'          },          {              path: '/Page2',              name: 'Page2',              component: 'Page2/index'          }        ]        return {            status: 200,            message: 'success',            data: routes        }      }    }]export default mock

/src/api/index.ts

 req({ url: '/api/test', method: 'get' })export const GetRoutes = () => req({ url: '/api/getRoutes', method: 'get' })

5.2 安装并配置pinia

pinia和vuex都是vue的全局状态管理工具，在前面的步骤已经安装了这个插件，我们就直接使用。
/src/store/index.ts代码如下

 {        return {            // 路由表            routes: [] as Array        }    },    getters: {},    actions: {        // 添加动态路由，并同步到状态管理器中，这个地方逻辑是写的最简单的方式，大家可以根据自己的业务需求来改写，本质就是使用addRoute来实现        addRoutes(data: Array, router: any) {            data.forEach(m => {                this.routes.push({                    path: m.path,                    name: m.name,                    // 错误示例：components:()=>import(`../views/Pages/${m.component}`)                    // 正确示例如下：                    component: modules[`../views/${m.component}.vue`],                })            })            console.log('this.routes',this.routes)            this.routes.forEach(m => router.addRoute(m))        },    }})

main.ts代码如下

/src/views/home.vue代码如下

  
Home
  
          {{ item.name }}      

这样就实现了动态路由的跳转，但是这样直接刷新page1页面就会导致页面空白，所以我们是在路由拦截里面进行了处理

 = [    {        // 路由重定向配置        path: '/',        redirect: '/Home'    }, {        path: '/Home',        component: () => import('../views/Home.vue')    }, {        // 404页面配置        path: '/:catchAll(.*)',        component: () => import('../views/404.vue')    }]// 路由对象const router = createRouter({    history: createWebHashHistory(),    routes})// 路由守卫router.beforeEach((to, from, next) => {    if (to.path !== '/Home' && to.path !== '/') {        const store = useStore()        if (store.routes.length < 1) {            GetRoutes().then(res => {                store.addRoutes(res.data.data, router)                next({ path: to.path, replace: true })            }).catch(_ => {                next()            })        } else {            next()        }    } else {        next()    }})export default router

这样动态路由就搭建成功了。

参考文章

https://blog.csdn.net/XUMENGCAS/article/details/128036487