vue-router相关（持续更新中）

文章目录

• router-view
• • router-view的嵌套
  • router.addRoute
  • • 复杂嵌套实例
• 总结

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);
  }
};

则最终的效果是在app.vue中有一个 <router-view> 占位符，会渲染Login、layout等组件，在layout内部的Main组件中嵌套一个 <router-view> 占位符，则会渲染layout组件的子路由，包括动态加入的路由

总结

即通过 <router-view> 的嵌套，实现了父路由和其children数组中路由对应组件的对应显示位置及效果，当前路由切换时，如果是子路由，则只会在内部的 <router-view> 部分进行更新。