vue - - - - - 你不知道的技巧

1. 路由参数获取

关于路由参数的获取，相信如下操作很常见:

<script>
export default {
  data() {
    return {};
  },
  mounted() {
    console.log("路由参数", this.$route.params.id);
  }
};
</script>

还有一种不太常见的参数获取方式，如下：
router.js

const routes = [
  {
    path: "/about",
    name: "About",
    component: () => import("../views/About.vue"),
    /**
     * params方式获取参数
     * 此方式需要path配合:  path: "/about/:id",
     */
    // props: true,

    /**
     * query方式获取参数
     * 无需参数配合，需要修改return返回的对象即可
     */
    props: (route) => {
      console.log("route: ", route);
      return {
        id: route.query.id,
      };
    },
  },
];

About.vue

<script>
export default {
  name: "About",
  props:['id'],
  data() {
    return {};
  },
  mounted() {
    console.log("路由参数", this.id);
  }
};
</script>

params方式 : http://localhost:8080/#/about/123456
打印日志如下：

query方式: http://localhost:8080/#/about?id=123
打印日志如下：