快捷導(dǎo)航

vue3在路由里取參數(shù)幾種常見(jiàn)的方法

更新時(shí)間：2025年06月05日 10:49:50 作者：用心去追夢(mèng)

這篇文章主要給大家介紹了關(guān)于vue3在路由里取參數(shù)幾種常見(jiàn)的方法,可使用$route（OptionsAPI）、useRoute（CompositionAPI）及watch監(jiān)聽(tīng),動(dòng)態(tài)參數(shù)通過(guò)params獲取,查詢參數(shù)用query提取,需要的朋友可以參考下

1. 通過(guò) this.$route 獲?。∣ptions API）

如果你使用的是 Options API，可以通過(guò) this.$route 訪問(wèn)路由對(duì)象，并從中提取參數(shù)。

export default {
  mounted() {
    // 獲取動(dòng)態(tài)路由參數(shù)
    const id = this.$route.params.id;
    console.log('Route Param:', id);

    // 獲取查詢參數(shù)
    const queryParam = this.$route.query.someQueryParam;
    console.log('Query Param:', queryParam);
  }
};

2. 通過(guò) useRoute 獲取（Composition API）

在 Composition API 中，可以使用 useRoute 鉤子來(lái)獲取路由信息。

import { useRoute } from 'vue-router';

export default {
  setup() {
    const route = useRoute();

    // 獲取動(dòng)態(tài)路由參數(shù)
    const id = route.params.id;
    console.log('Route Param:', id);

    // 獲取查詢參數(shù)
    const queryParam = route.query.someQueryParam;
    console.log('Query Param:', queryParam);

    return { id, queryParam };
  }
};

3. 監(jiān)聽(tīng)參數(shù)變化

如果路由參數(shù)可能會(huì)發(fā)生變化（例如用戶導(dǎo)航到同一個(gè)路由但參數(shù)不同），你需要監(jiān)聽(tīng)參數(shù)的變化。

使用 watch

import { useRoute, watch } from 'vue-router';
import { ref } from 'vue';

export default {
  setup() {
    const route = useRoute();
    const id = ref(route.params.id);

    // 監(jiān)聽(tīng)路由參數(shù)變化
    watch(
      () => route.params.id,
      (newId) => {
        id.value = newId;
        console.log('Updated Route Param:', newId);
      }
    );

    return { id };
  }
};

4. 動(dòng)態(tài)路由參數(shù)示例

假設(shè)你的路由配置如下：

const routes = [
  {
    path: '/user/:id',
    component: UserComponent
  }
];

動(dòng)態(tài)參數(shù) id 可以通過(guò) route.params.id 獲取。
查詢參數(shù)（如 /user/123?name=John）可以通過(guò) route.query.name 獲取。

5. 完整示例

以下是一個(gè)完整的示例，展示如何在組件中獲取和監(jiān)聽(tīng)路由參數(shù)：

<template>
  <div>
    <p>User ID: {{ id }}</p>
    <p>Query Param: {{ queryParam }}</p>
  </div>
</template>

<script>
import { useRoute, watch } from 'vue-router';
import { ref } from 'vue';

export default {
  setup() {
    const route = useRoute();
    const id = ref(route.params.id);
    const queryParam = ref(route.query.name);

    // 監(jiān)聽(tīng)路由參數(shù)變化
    watch(
      () => route.params.id,
      (newId) => {
        id.value = newId;
      }
    );

    // 監(jiān)聽(tīng)查詢參數(shù)變化
    watch(
      () => route.query.name,
      (newName) => {
        queryParam.value = newName;
      }
    );

    return { id, queryParam };
  }
};
</script>

注意事項(xiàng)

動(dòng)態(tài)路由參數(shù) vs 查詢參數(shù)：
- 動(dòng)態(tài)路由參數(shù)：定義在路徑中的參數(shù)（如 /user/:id）。
- 查詢參數(shù)：URL 中的查詢字符串（如 /user?id=123&name=John）。
參數(shù)變化時(shí)重新加載數(shù)據(jù)：
如果路由參數(shù)發(fā)生變化，但組件沒(méi)有重新加載（因?yàn)閺?fù)用了相同的組件實(shí)例），需要手動(dòng)監(jiān)聽(tīng)參數(shù)變化并更新數(shù)據(jù)。

希望這些內(nèi)容能幫助你順利在 Vue 3 中獲取路由參數(shù)！