解讀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 項目集成 electron 和 electron 打包及環(huán)境配
文章介紹了如何使用Vue和Electron開發(fā)桌面端應用,包括安裝Electron、配置package.json、創(chuàng)建main.js文件、運行和打包應用等步驟,并分享了一些常見的打包錯誤及其解決方法,感興趣的朋友一起看看吧2025-01-01vue?watch中如何獲取this.$refs.xxx節(jié)點
這篇文章主要介紹了vue?watch中獲取this.$refs.xxx節(jié)點的方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-08-08