router-view

<router-view></router-view>

router-view 是Vue Router中的一个组件，用于渲染匹配到的路由组件。它是用来显示当前路由对应的组件内容的占位符。即当前路由组件会在占位符对应位置显示出来。
<router-view></router-view> 标签将会根据当前路由的路径匹配到相应的路由组件，并将其内容渲染在这个位置。

router-view的嵌套

在<router-view></router-view>中嵌套一层<router-view></router-view>标签可以用来渲染路由的子路由。
可以在不同的层级使用 <router-view> 来渲染每个嵌套路由对应的组件。外部的 <router-view> 负责渲染父级路由的组件，而位于父组件内部的内部 <router-view> 负责渲染子级路由的组件。

假设你有一个父级路由 /home 和一个子级路由 /home/profile 。当用户导航到 /home 时，与 /home 路由关联的组件将在外部的 <router-view> 中渲染。然后，如果用户导航到 /home/profile ，与 /home/profile 路由关联的组件将在父组件内部的内部 <router-view> 中渲染。

router.addRoute

router.addRoute 可以动态添加一条新路由。

router.addRoute(route: RouteConfig): () => void

router.addRoute 还可以为现有路由添加子路由。

router.addRoute(parentName: string, route: RouteConfig): () => void

复杂嵌套实例

采用动态路由的方式添加路由，根据后端返回的路由信息动态渲染路由菜单，根据路由信息在不同的 <router-view> 位置加载不同的组件
系统静态路由如下：

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: []}
];

通过调用api获取路由信息，json数据如下：

{"code": 200,"data": [{"path": "/home/index","name": "home","component": "/home/index","meta": {"icon": "HomeFilled","title": "首页","isLink": "","isHide": false,"isFull": false,"isAffix": true,"isKeepAlive": true}},{"path": "/test/vslot","name": "vslot","component": "/test/vslot-test/a","meta": {"icon": "Histogram","title": "vslot-test","isLink": "","isHide": false,"isFull": false,"isAffix": false,"isKeepAlive": true}}

使用router.addRoute动态添加路由
authStore.flatMenuListGet方法用于获取每一个路由，并且将子路由合并成一维数组，即做数组扁平化处理
通过判断item.meta.isFull，如果是false，则为layout的子路由，在内部 <router-view> 中显示，如果是true，则直接加入路由中，与layout同级，在第一层 <router-view> 中显示，即覆盖全屏

import router from "@/routers/index";
import { useAuthStore } from "@/stores/modules/auth";/*** @description 初始化动态路由*/
export const initDynamicRouter = async () => {const authStore = useAuthStore();try {  authStore.flatMenuListGet.forEach(item => {item.children && delete item.children;if (item.component && typeof item.component == "string") {item.component = modules["/src/views" + item.component + ".vue"];}if (item.meta.isFull) {router.addRoute(item as unknown as RouteRecordRaw);} else {router.addRoute("layout", item as unknown as RouteRecordRaw);}});} catch (error) {// 当按钮 || 菜单请求出错时，重定向到登陆页userStore.setToken("");router.replace(LOGIN_URL);return Promise.reject(error);}
};