vue3路由传参 query 、params

vue3 中的传参方式和vue2中一样，都可以用query和params传参
不过注意的是，vue2 中是有this的，但是vue3是在setup中进行的，且要引入 useRoute 和useRouter
代码如下
router 文件夹内容不变，在你用cli 创建项目时选中就行，我这里不在展示代码，放一个图看看就好了
在这里插入图片描述

看下RouteView 文件的代码

<template>
  <div>
    给about传参数
    <button @click="params">params传参</button>
    <button @click="query">query传参</button>
  </div>
</template>

<script>
import { useRouter } from "vue-router";
export default {
  setup() {
    const $router = useRouter();
    console.log($router, "router");
    let params = () => {
      $router.push({
        name: "About",
        params: {
          id: 1,
          aa: "nini",
        },
      });
    };
    let query = () => {
      $router.push({
        path: "/about",
        query: {
          id: 2,
          age: 13,
        },
      });
    };
    return {
      params,
      query,
    };
  },
};
</script>

<style lang="scss" scoped>
</style>

about页面
在这里插入图片描述

不管那种方式都可以正确跳转，且得到传参参数。

import { useRoute } from "vue-router";//引入路由组件
import { onMounted } from "vue";//引入钩子函数
export default {
  setup() {
    const $route = useRoute();
    onMounted(() => {
      console.log($route.params); //   打印 params 的参数
      console.log($route.query); //   打印 query 的参数
      // 这里得到了参数， 就可以做我们接口请求的处理了
    });
  },
};

我上边也有用watch 方法监听路由变化，用watch 是方便做监听动态的路由传参，从而使在异步获取API时能够实时监控到路由参数的变化。

在这里插入图片描述

当然还有其他的传参方式，后续在做。

vue3路由传参 query 、params

猜你喜欢