今天研究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里面。后期可以根据业务放到路由里面或者其他业务里面。这个就根据自己需要了
至于添加路由的方式，我测试了这个方法是可以的。不好的地方就是得循环遍历。不知道还有没有别的好点的方法，希望指教
