router4 ts动态添加路由

今天研究route4.0 在vue3里面，使用ts的方式定义路由并且进行动态添加。route4.0在添加路由的方式上面做了一点点的改动。跟之前的有点不一样，因此记录一下。

一、创建路由文件

在项目route里面创建一个简单地index.ts文件。定义内容如下:

/**
  ts版本的路由
  2022年2月28日21:00:46
  CL
 */

import { createRouter, createWebHashHistory, createWebHistory, RouteRecordRaw } from 'vue-router'

import login from '@/views/login/index.vue'    // 自定义的 登录页    自己随便定义ide
import LoginOut from '@/views/login/loginOut.vue'  // 自定义的登出页   自己随便定义的
import TabsViewLayout from '@/layout/tabs/TabsView.vue' // tabview界面   自己随便定义ide
import MainLayout from '@/layout/index.vue'  // 主界面的layout

/**
默认初始的路由配置，跟创建route一起的
**/
const defaultRoutes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Login',
    component: login
  }
]

/**
 * 定义路由模块
 * 2022年2月28日21:41:54
 * CL
 * 业务逻辑，这里是暂时写死的，后期可以从服务器里面获取，然后动态生成，在后面动态添加，从而实现路由权限控制
 */
const businessRouter: Array<RouteRecordRaw> = [
  {
    path: '/LoginOut',
    name: 'LoginOut',
    component: LoginOut
  },
  {
    path: '/LoginOutaa',
    name: 'LoginOutaa',
    component: MainLayout
  },
  {
    path: '/TabsViewLayout',
    name: 'TabsViewLayout',
    component: TabsViewLayout
  }
]

/**
 * 缺失的路由，放在最后的, 如果没有匹配到对应的路由，在走这里，在动态路由添加之后再添加的。
 */
const errorRouter: Array<RouteRecordRaw> = [
  { // 当没有匹配到正确路由的时候，匹配notOpen组件
    path: '/:pathMatch(.*)*',   // 这个地方做了一个路由匹配。如果没有，则跳转到LoginOut组件里面
    component: LoginOut,
    meta: {
      footShow: false // true显示，false隐藏
    }
  }
]



/**
 * 定义返回模块
 */
const router = createRouter({
  history: createWebHistory('/abc/'),
  routes: defaultRoutes
})

export { businessRouter, errorRouter }

export default router

二、在main.ts 里面引用路由。并且动态添加。

    之前版本，route里面有一个addRoutes方法，可以添加路由数组。但是在route4.0里面， 却没有这个方法。找了一下，只有addRoute方法，这个就不是很方便，不知道为什么去掉了。我只能通过循环的方式进行添加。代码如下：

import { createApp } from 'vue'
import App from './App.vue'
import router, { businessRouter, errorRouter } from './router'
import store from './store'
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.less';
import './until/permission'

// 自定义的icon的组件，这里可以暂时不要看
import { createFromIconfontCN } from '@ant-design/icons-vue';
const Fonts = createFromIconfontCN({
     scriptUrl: '//at.alicdn.com/t/font_3243513_cj8rwbrvouu.js'
})

/***
    动态添加路由模块 主要看这里  下面  —————————————————————————————————————— start 
*/
// 动态添加路由-- 业务模块
for (let i = 0 ; i < businessRouter.length; i++) {
     const addRoute = businessRouter[i]
     router.addRoute(addRoute)
}
// 添加最后未匹配的路由
for (let j = 0; j < errorRouter.length; j++) {
     const errorRoute = errorRouter[j]
     router.addRoute(errorRoute)
}
/***
    动态添加路由模块 主要看这里  上面 —————————————————————————————————————— end
*/
createApp(App).use(router).use(store).use(Antd).component("LocalIcon", Fonts).mount('#app')

这样就可以添加路由了。这里我为了方便，添加到main.ts里面。后期可以根据业务放到路由里面或者其他业务里面。这个就根据自己需要了

至于添加路由的方式，我测试了这个方法是可以的。不好的地方就是得循环遍历。不知道还有没有别的好点的方法，希望指教