VueRouter常见问题汇总

路由可选参数

routerConfig

 {
    path: "/home/mission/:type/:courseid/:missionid",
    name: "Mission",
    props: true,
    component: () =>
        import(
        /* webpackChunkName:'Mission' */
        "@/views/course/mission.vue"
        ),
}

问题

传参时如果少传一个参数 那路由地址将无法正常显示

   this.$router.push({
        name: "Mission",
        params: { type: "add", courseid: item.uuid },
      });

解决

修改 routerConfig

 {
    //  :parmas?  => ? 就是代表参数可选
    path: "/home/mission/:type?/:courseid?/:missionid?",
    name: "Mission",
    props: true,
    component: () =>
        import(
        /* webpackChunkName:'Mission' */
        "@/views/course/mission.vue"
        ),
}