vue-router:带参数的动态路由与路由组件传参

中文文档地址: 带参数的动态路由，路由组件传参。

路径参数是将 path的/:id/:name 等参数映射到 $route.params
路由组件传参是将 $route.params 或者其他属性 设置给组件的 props
路由组件传参有三种模式：布尔、对象、函数

declare type _RouteRecordProps = boolean | Record<string, any> | ((to: RouteLocationNormalized) => Record<string, any>);

布尔模式

{
    path: "/info/:id/:name",
    name: "Info",
    props: true,
    component: () => import("../views/Info.vue"),
}

export default defineComponent({
  name: "Info",
  props: ["id", "name"],
  mounted() {
    console.log(this.$props);
  },
});

路径 http://localhost:8080/#/info/12/zhangsan
输出

 {id: "12", name: "zhangsan"}

命名视图

 {
    path: "/info/:id/:name",
    name: "Info",
    props: { default: true, user: false },
    components: {
      default: () => import("../views/Info.vue"),
      user: () => import("../views/User.vue"),
    }
 }

路径 http://localhost:8080/#/info/12/zhangsan
输出

 Info {id: "12", name: "zhangsan"}
 User {id: undefined, name: undefined}

对象模式

  {
    path: "/info/:id/:name",
    name: "Info",
    props: { default: { other: "welcome" }, user: { other: "hello" } },
    components: {
      default: () => import("../views/Info.vue"),
      user: () => import("../views/User.vue"),
    }
  }

export default defineComponent({
  name: "Info",
  props: ["id", "name", "other"],
  mounted() {
    console.log("Info", this.$props);
  },
});
export default defineComponent({
  name: "User",
  props: ["id", "name", "other"],
  mounted() {
    console.log("User", this.$props);
  },
});

路径 http://localhost:8080/#/info/12/zhangsan
输出

Info {other: "welcome", id: undefined, name: undefined}
User {other: "hello", id: undefined, name: undefined}

函数模式

{
    path: "/info/:id/:name",
    name: "Info",
    props: {
      default: (route) => ({
        id: "default:" + route.params.id,
        other: "other",
      }),
      user: (route) => ({
        id: "user:" + route.params.id,
        name: "user:" + route.params.name,
        other: "welcome " + route.query.say,
      }),
    },
    components: {
      default: () => import("../views/Info.vue"),
      user: () => import("../views/User.vue"),
    },
}

路径 http://localhost:8080/#/info/12/zhangsan?say=friend
输出

Info {id: "default:12", other: "other", name: undefined}
User {id: "user:12", name: "user:zhangsan", other: "welcome friend"}