vue 添加动态路由

动态路由一般是项目中配合权限来使用的
简单的写法

// vue2 
this.$router.addRoutes('你的路由页面')
// 例如
import AsyncComponent from '@/view/user.vue'
this.$router.addRoutes(AsyncComponent)

如果比较多的话就需要用到循环了

VUE3 写法

export const staticRouter: RouteRecordRaw[] = [
	{
		path: "/",
		redirect: HOME_URL
	},
	{
		path: LOGIN_URL,
		name: "login",
		component: () => import("@/views/login/index.vue"),
		meta: {
			title: "登录"
		}
	},
	{
		path: "/layout",
		name: "layout",
		component: () => import("@/layouts/index.vue"),
		// component: () => import("@/layouts/indexAsync.vue"),
		redirect: HOME_URL,
		children: []
	}
];

// 这里的 ‘layout’跟路由里面的name对应
const routeObj = {
   	path: 'index/useTreeFilter', // 这里要把父路由的路径也带上
    name: "complexProTable"
    meta: { title: '测试动态路由', noCache: true },
    component: () =>
        import("/src/views/proTable/useTreeFilter/index.vue"),
}

router.addRoute("layout", routeObj);