Vue Router4中params傳參失效和報錯問題的解決方法

更新時間：2024年03月01日 11:05:21 作者：十一*

在使用vue-router4中params 進行路由組件之間傳參,跳轉(zhuǎn)頁面接收不了并報錯,本文給大家介紹了Vue Router4中params傳參失效和報錯問題的解決方法,需要的朋友可以參考下

問題描述

在使用vue-router4中params 進行路由組件之間傳參，跳轉(zhuǎn)頁面接收不了并出現(xiàn)如下錯誤

![在這里插入圖片描述](https://img-blog.csdnimg.cn/8d64306439ac47b49edf4c0315d213f2.png

如下是我的代碼

傳輸頁面

  router.push({
    name: "postBlog",
    params: {
      dialogVisible: true,
      data: data,
    },
  });

接收頁面

import { useRouter } from "vue-router";
const route = useRouter();

const dialogVisible = ref(false)
console.log(route.params)

原因分析：

點開鏈接后發(fā)現(xiàn)了原因, 點擊查看更新日志

在這里插入圖片描述

也就是說，從Vue Router的2022-8-22 這次更新后，我們使用上面的方式在新頁面無法獲取

解決方案：

vue也給我們提出了代替方案：

使用 query 的方式傳參
將參數(shù)放在 pinia 或 vuex倉庫里
使用動態(tài)路由匹配
傳遞 state，在新頁面使用 History API 接收參數(shù)
使用 meta 原信息方式傳遞 (此方式更適用于路由守衛(wèi))

使用動態(tài)路由匹配

如果傳遞參數(shù)較少的情況下，可以嘗試使用下面這種方式，只要修改一下path定義部分就可以了：

// params 傳遞的參數(shù): { id: '1', name: 'ly', phone: 13246566476, age: 23 }

{
      path: '/detail/:id/:name/:phone/:age',
      name: 'detail',
      component: () => import('@/views/detail/index.vue')
}

查看頁面效果，控制臺警告也消失了：

在這里插入圖片描述

注意，如果使用使用了這種動態(tài)路由匹配方式， path: ‘/detail/:id/:name/:phone/:age’ ,中這三個參數(shù)你都必須傳遞，否則會報錯：

在這里插入圖片描述

使用HistoryAPI方式傳遞和接收

在跳轉(zhuǎn)前的頁面使用 state 參數(shù)：

<script setup>
import { useRouter } from 'vue-router'
    
const router = useRouter()

const params = { id: '1', name: 'ly', phone: 13246566476, age: 23 }
const toDetail = () => router.push({ name: 'detail', state: { params } })

</script>

<template>
  <el-button type="danger" @click="toDetail">查看情頁</el-button>
</template>

跳轉(zhuǎn)的后頁面接收：

<template>
  <div>{{ historyParams }}</div>
</template>

<script setup lang="ts">

const historyParams = history.state.params
console.log('history.state', history.state)
</script>

在這里插入圖片描述