亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

 更新時間:2023年08月14日 14:54:45   作者:謝爾登  
這篇文章主要介紹了Vue-Router使用prams路由傳參失效,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下

報錯信息: [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 對應 router 的 name
    name: 'Reg',
    // 不會展示在URL上,存在于內存里
    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>

在這里插入圖片描述

此時得到的 params 數據為空

然后查看更新日志:點擊查看更新日志

所以,這種使用 prams 路由傳參的方法失效。

到此這篇關于Vue-Router 使用 prams 路由傳參失效的文章就介紹到這了,更多相關Vue Router 使用 prams 路由傳參內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!

相關文章

  • vue 圖標選擇器的實例代碼

    vue 圖標選擇器的實例代碼

    本文通過實例代碼給大家介紹了vue 圖標選擇器的相關知識,圖文實例代碼相結合給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧
    2021-11-11
  • Vue修改頁面標簽的方法示例

    Vue修改頁面標簽的方法示例

    vue項目有時候需要根據頁面需要動態(tài)的去修改頁面標題名稱,本文就來介紹一下,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2023-06-06
  • vuex中五大屬性和使用說明(包括輔助函數)

    vuex中五大屬性和使用說明(包括輔助函數)

    這篇文章主要介紹了vuex中五大屬性和使用說明(包括輔助函數),具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-05-05
  • Vue 動態(tài)添加路由及生成菜單的方法示例

    Vue 動態(tài)添加路由及生成菜單的方法示例

    這篇文章主要介紹了Vue 動態(tài)添加路由及生成菜單的方法示例,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2019-06-06
  • vue 項目集成 electron 和 electron 打包及環(huán)境配置方法

    vue 項目集成 electron 和 electron 打包及環(huán)境配

    文章介紹了如何使用Vue和Electron開發(fā)桌面端應用,包括安裝Electron、配置package.json、創(chuàng)建main.js文件、運行和打包應用等步驟,并分享了一些常見的打包錯誤及其解決方法,感興趣的朋友一起看看吧
    2025-01-01
  • Vue.js每天必學之表單控件綁定

    Vue.js每天必學之表單控件綁定

    Vue.js每天必學之表單控件綁定,如何在表單控件元素上創(chuàng)建雙向數據綁定,感興趣的小伙伴們可以參考一下
    2016-09-09
  • 一文帶你掌握Vue中的路由守衛(wèi)

    一文帶你掌握Vue中的路由守衛(wèi)

    路由守衛(wèi)(Route?Guards)是?Vue?Router?的一個功能,它允許我們在路由發(fā)生之前執(zhí)行邏輯判斷,這篇文章主要為大家介紹了Vue中路由守衛(wèi)的具體應用,需要的可以了解下
    2024-03-03
  • vue?watch中如何獲取this.$refs.xxx節(jié)點

    vue?watch中如何獲取this.$refs.xxx節(jié)點

    這篇文章主要介紹了vue?watch中獲取this.$refs.xxx節(jié)點的方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-08-08
  • Vue實現省市區(qū)級聯下拉選擇框

    Vue實現省市區(qū)級聯下拉選擇框

    這篇文章主要為大家詳細介紹了Vue實現省市區(qū)級聯下拉選擇框,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-03-03
  • Vue.js每天必學之指令系統與自定義指令

    Vue.js每天必學之指令系統與自定義指令

    Vue.js每天必學之指令系統與自定義指令,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-09-09

最新評論