快捷導(dǎo)航

解讀Vue-Router?使用?prams?路由傳參失效

更新時間：2023年08月14日 14:54:45 作者：謝爾登

這篇文章主要介紹了Vue-Router使用prams路由傳參失效,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下

報錯信息： [Vue Router warn]: Discarded invalid param(s) “name”, “price”, “id” when navigating.

在這里插入圖片描述

list.json

{
  "data": [
    {
      "name": "面",
      "price":300,
      "id": 1
    },
    {
      "name": "水",
      "price":400,
      "id": 2
    },
    {
      "name": "菜",
      "price":500,
      "id": 3
    }
  ]
}

login.vue

<template>
  <h1>
    我是列表頁面
  </h1>
  <table cellpadding="0" class="table" border="1">
    <thead>
      <tr>
        <th>商品</th>
        <th>價格</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <tr :key="item.id" v-for="item in data">
        <th>{{ item.name }}</th>
        <th>{{ item.price }}</th>
        <th>
          <button @click="toDetail(item)">詳情</button>
        </th>
      </tr>
    </tbody>
  </table>
</template>
<script setup lang="ts">
import { data } from './list.json'
import { useRouter } from 'vue-router';
const router = useRouter()
type Item = {
  name: string;
  price: number;
  id: number;
}
const toDetail = (item: Item) => {
  router.push({
    // name 對應(yīng) router 的 name
    name: 'Reg',
    // 不會展示在URL上，存在于內(nèi)存里
    params: item
  })
}
</script>
<style scoped>
.table {
  width: 400px;
}
</style>

reg.vue

<template>
  <h1>
    我是列表頁面
  </h1>
  <button @click="router.back()">返回</button>
  <div style="font-size: 20px;">
    品牌：{{ route.params.name }}
  </div>
  <div style="font-size: 20px;">
    價格：{{ route.params.price }}
  </div>
  <div style="font-size: 20px;">
    id： {{ route.params.id }}
  </div>
</template>
<script setup lang="ts">
import { useRoute } from 'vue-router';
import { useRouter } from 'vue-router';
const router = useRouter();
const route = useRoute();
</script>
<style scoped>
.reg {
  background-color: green;
  height: 400px;
  width: 400px;
  font-size: 20px;
  color: white;
}
</style>

App.vue

<template>
  <h1>hello world</h1>
  <hr>
  <router-view></router-view>
</template>
<script setup lang="ts">
import { useRouter } from 'vue-router';
const router = useRouter();
</script>
<style scoped></style>

在這里插入圖片描述