vue3頁面跳轉傳值時獲取不到params值的問題解決

更新時間：2024年11月19日 11:28:40 作者：牛掰666

在Vue3頁面跳轉時傳遞和獲取參數(shù)通常通過路由參數(shù)和查詢字符串實現(xiàn),本文主要介紹了vue3頁面跳轉傳值時獲取不到params值的問題解決,感興趣的可以了解一下

1. 確認路由配置

首先確認你的路由配置是否正確。在 params 中傳遞參數(shù)時，你需要在路由定義中指定動態(tài)路徑段。

import { createRouter, createWebHistory } from 'vue-router';
import YourComponent from './YourComponent.vue';

const routes = [
  {
    path: '/yourpath/:param1/:param2',
    name: 'YourComponent',
    component: YourComponent
  },
  // 其他路由...
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

2. 跳轉時傳遞參數(shù)

在跳轉到目標路由時，確保你正確地傳遞了 params 參數(shù)。

this.$router.push({ name: 'YourComponent', params: { param1: 'value1', param2: 'value2' } });

或者使用完整的路徑：

this.$router.push('/yourpath/value1/value2');

3. 接收 params 值

在目標組件中，你可以通過 props 或者 setup 中的 route 來接收 params 值。

3.1 使用 props

如果你的組件是通過 <router-view> 渲染的，并且你想在 <script> 部分使用 props 來接收參數(shù)，那么你需要在組件中聲明這些 props：

export default {
  props: ['param1', 'param2'],
  created() {
    console.log(this.param1, this.param2);
  }
}

這種方式需要在路由配置中使用 <component :is="$route.name"></component> 來渲染組件，并且在組件中定義對應的 props 名稱。

3.2 使用 Composition API

如果你使用的是 Composition API (setup 函數(shù))，你可以直接訪問 useRoute() 來獲取路由參數(shù)：

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

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

    const param1 = ref(route.params.param1);
    const param2 = ref(route.params.param2);

    onMounted(() => {
      console.log(param1.value, param2.value);
    });

    return {
      param1,
      param2
    };
  }
}

4. 檢查路由變化

如果你的組件在路由變化時需要更新 params，那么你可以監(jiān)聽 $route 的變化：

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

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

    watch(route, (newRoute) => {
      param1.value = newRoute.params.param1;
      param2.value = newRoute.params.param2;
    }, { immediate: true });

    return {
      param1,
      param2
    };
  }
}