Vue中传参query和params的区别

query传参

Vue 2 选项式 API 示例

<router-link to="/page?name='张三'">query</router-link>

直接在path后面加 ?参数，页面跳转的时候，参数会传过去。

路由正常配置即可：

{
  path: '/page',
  name: 'page',
  component: Page
}

this.$router写法：

<button @click="goQuery()">query</button>
<script>
    export default {
        methods: {
            goQuery() {
                this.$router.push({
                    path: "/page",
                    query: { name: "张三" },
                });
            },
        },
    };
</script>

Vue 3 组合式 API 示例

<button @click="goQuery()">query</button>
<script setup>
    import { useRouter } from "vue-router";

    const router = useRouter();

    const goQuery = () => {
        router.push({
            path: "/page",
            query: { name: "张三" },
        });
    };
</script>

通过router.push做路由跳转的话，query请求使用的是path，url会显示参数，所以，query 传参 类似于网络请求中的 get 请求

params传参

Vue 2 选项式 API 示例

<router-link to="/page/124242aADqadFA">params</router-link>

路由要配置为：

{
  path: '/page/:id',
  name: 'page',
  component: Page
}

params传参是在/后面直接加参数传参，/page/id这样的url会直接映射到对应的路由，来达到传参的效果

this.$router写法：

<button @click="goParams()">params</button>
<script>
    export default {
        methods: {
            goParams() {
                this.$router.push({
                    name: "page", //只能为name
                    params: { id: "124242aADqadFA" },
                });
            },
        },
    };
</script>

Vue 3 组合式 API 示例

<button @click="goParams()">params</button>
<script setup>
    import { useRouter } from "vue-router";

    const router = useRouter();

    const goParams = () => {
        router.push({
            name: "page", //只能为name
            params: { id: "124242aADqadFA" },
        });
    };
</script>

通过router.push做路由跳转的话，params使用的是name，并且url会显示参数（如 /page/124242aADqadFA），所以，params 传参 也是显示在 URL 中的，与 query 传参的主要区别在于 URL 格式和获取方式。

二者区别

1. 传递方式：

   • query：通过 URL 查询字符串传递，格式为 ?key=value&key2=value2
   • params：通过 URL 路径参数传递，格式为 /path/:param1/:param2

2. 路由配置：

   • query：无需特殊配置，正常路由即可
   • params：需要在路由配置中定义参数占位符，如 /page/:id

3. 跳转方式：

   • query：可以使用 path 或 name 跳转
   • params：只能使用 name 跳转

4. URL 显示：

   • query：参数显示在 URL 查询字符串中
   • params：参数显示在 URL 路径中

5. 参数获取：

   • query：通过 this.$route.query（Vue 2）或 useRoute().query（Vue 3）获取
   • params：通过 this.$route.params（Vue 2）或 useRoute().params（Vue 3）获取

6. 参数持久化：

   • query：页面刷新后参数仍然存在
   • params：页面刷新后参数会丢失（除非在路由配置中定义了参数占位符）

获取参数示例

Vue 2 选项式 API 示例

示例1：获取 query 参数

// 获取 query 参数
export default {
    mounted() {
        console.log(this.$route.query.name); // 输出: 张三
    },
};

示例2：获取 params 参数

// 获取 params 参数
export default {
    mounted() {
        console.log(this.$route.params.id); // 输出: 124242aADqadFA
    },
};

Vue 3 组合式 API 示例

示例1：获取 query 参数

<script setup>
    // 获取 query 参数
    import { useRoute } from "vue-router";

    const route = useRoute();
    console.log(route.query.name); // 输出: 张三
</script>

示例2：获取 params 参数

<script setup>
    // 获取 params 参数
    import { useRoute } from "vue-router";

    const route = useRoute();
    console.log(route.params.id); // 输出: 124242aADqadFA
</script>