當前位置：首頁 > 前端技术 > vue >内容正文

vue

【Vue3从零开始-实战】S14：详情页回退事件及路由参数的传递获取数据

發布時間：2023/12/20 vue 40 豆豆

生活随笔收集整理的這篇文章主要介紹了【Vue3从零开始-实战】S14：详情页回退事件及路由参数的传递获取数据小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

前言

實戰已經開始了！上一篇已經將詳情頁的店鋪信息展示出來了，但是頂部還有一個搜索框和返回按鈕，而且詳情頁的店鋪數據是在頁面中固定寫死的，所以本章節會將頂部搜索欄進行布局，并且通過返回按鈕可以回到首頁。其次會通過路由傳參的方式，從首頁跳轉到詳情頁，并動態獲取詳情頁店鋪數據。

搜索框布局

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-KjGtO7qf-1658392912044)(https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6e3b726e095d4e67a81837f09830ffc7~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.image?)]

🌀 根據稿圖，我們發現搜索框部分只有一個input輸入框和一個返回按鈕，比較簡單，所以下面就直接貼代碼了，有興趣的朋友可以自己設計的哦。

👉 DOM元素

👉 樣式

.search {display: flex;margin: .2rem 0 .16rem 0;line-height: .32rem;&__back {width: .3rem;font-size: .24rem;color: #B6B6B6;}&__content {display: flex;flex: 1;background: #F5F5F5;border-radius: .16rem;&__icon {width: .44rem;text-align: center;color: #B7B7B7;}&__input {display: block;width: 100%;padding-right: .2rem;border: none;outline: none;background: none;height: .32rem;font-size: .14rem;color: #333;&::placeholder {color: #333;}}} }

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-rICW8HzB-1658392912045)(https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c3474d62f07842e59476d0bf7b82f389~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.image?)]

router-link標簽實現跳轉

🌀 頁面跳轉之前在首頁和登錄注冊頁面之間都有寫過，但是用的點擊事件去跳轉的，這次我們就用以前學過但沒有實際用過的router-link標簽實現

<router-link to="/shop" v-for="item in nearbyList" :key="item.id"><ShopItem :item="item" /> </router-link>

將Nearby.vue中的子組件標簽用router-link標簽包裹起來。
由于列表頁上的每一條數據都得點擊跳轉，所以需要將循環事件放在router-link標簽上。
router-link標簽還會接收一個參數 to ，它表示需要跳轉到哪個路由（對應路由配置頁中的path）

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-GL92qM4e-1658392912045)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3542fb5c16a743408bb7218199601ed0~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.image?)]

在瀏覽器中可以看到多了幾個 a 標簽包裹著列表中的元素
由于 a 標簽的默認樣式，所以列表頁上有下劃線。

👉 去掉a標簽的下劃線

a{text-decoration: none; }

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-radf3g8N-1658392912046)(https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e36a5ed9c2a045379e9cbfda3b5c6d30~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.image?)]

router.back函數回退

router.back函數是vue-router插件提供的一個回退事件方法。

👉 給詳情頁頂部欄中的返回按鈕一個點擊事件

👉 引入所需的路由插件

import { useRouter } from 'vue-router'

👉 在setup函數中定義路由，并調用回退事件的方法

const router = useRouter() const handleBackClick = () => {router.back() }

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-XY7GW9oK-1658392912046)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ef9e4cb319f84202bd239e5a89373a49~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.image?)]

店鋪信息動態數據

🌀 詳情頁中的店鋪信息是固定的數據，在實際項目中我們應該通過接口請求獲取到對應的店鋪信息，所以就需要根據首頁列表的店鋪ID來請求接口獲取到對應的店鋪數據了。

mock接口

👉 打開mock接口后臺，新增店鋪詳情接口

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-Tfj7c84L-1658392912046)(https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/48c1b6b3ff80431da5a1c09581b57b1c~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.image?)]

👉 在詳情頁中通過get請求接口

引入get請求

import { get } from '../../utils/request'

進入頁面就需要直接請求接口

const data = reactive({ item: {} }) const getItemData = async () => {const result = await get('/api/shop/1')if (result.data.code === 0 && result.data.data) {data.item = result.data.data} } getItemData() const { item } = toRefs(data)

👉 為了看到效果，需要將setup函數里面原來寫死的數據刪除

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-paAQD4Bu-1658392912046)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/65d4de106ed04a1d8aa750e0127a30c4~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.image?)]

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-XzRtqZaN-1658392912047)(https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d201dae4f932446e8240997d1825fedb~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.image?)]

在接口請求的時候動態傳遞了一個id，也就是接口url后面的/:id

😲 在實際項目中，id是通過列表傳遞過去的，然后去請求接口，也就是需要將id動態化。

動態路由傳參

🌀 在接口后面可以添加/:id的方式獲取動態參數，其實在路由中也可以通過這種方式獲取到動態參數。

👉 打開路由配置文件，并重新配置詳情頁路由，在路由后面添加/:id

{path: '/shop/:id',name: 'Shop',component: () => import(/* webpackChunkName: "shop" */ '../views/shop/Shop') }

👉 首頁列表中點擊跳轉時，就需要通過v-bind指令動態綁定參數

<router-link :to="`/shop/${item.id}`" v-for="item in nearbyList" :key="item.id"><ShopItem :item="item" /> </router-link>

router-link標簽中的to就是動態跳轉路徑，里面綁定了當前循環的店鋪id

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-eGQqMy80-1658392912047)(https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/69743a24ad144fe4a828275e9ea465d3~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.image?)]

在瀏覽器地址欄中可以發現，當我們點擊列表中的店鋪時，地址欄的URL后面就會動態添加當前點擊的店鋪ID

😲 但是接口請求的時候，需要獲取到地址欄的店鋪id才能讓接口后面的參數也變成動態的。

route獲取路由參數

👉 在詳情頁中引入useRoute

import { useRouter, useRoute } from 'vue-router'

👉 為了知道useRoute是干啥的，我們需要在setup函數中調用useRoute方法，并打印出來看看

const route = useRoute() console.log(route)

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-uO3Tfdvf-1658392912047)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/29ffc40470ab46699dae8ee3b7c2df6e~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.image?)]

useRoute函數是vue-router提供的一個用來獲取路由配置項的方法，里面有配置項中的name、path、params等。

name：配置項中路由的名稱。
params：路由項中傳遞的參數
path：路由項中跳轉的路徑

🔆 通過打印出來之后發現，可以通過useRoute函數中的params獲取到店鋪id

👉 修改接口傳遞參數的方式，將靜態參數改為動態參數

const result = await get(`/api/shop/${route.params.id}`)

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-4vMzQWJy-1658392912047)(https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/14dc6b62501746a38a397950beea42bd~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.image?)]

由于是模擬接口數據，所以每次請求的ID雖然變了，但是接口數據還是固定的。

拆分詳情頁setup函數

🌀 不管是在首頁，亦或是登錄注冊頁面，我們都去拆分過setup函數中的邏輯，也在前面的文章中說明過setup函數的職責。

🔆 下面就直接拆分了，也會按照前面文章中的拆分方式。

總結

本篇文章主要講解了路由中的回退事件和動態傳參的方式，并在接口請求中獲取到路由傳遞的參數。

總結

以上是生活随笔為你收集整理的【Vue3从零开始-实战】S14：详情页回退事件及路由参数的传递获取数据的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： (VS2008)Cannot open
下一篇： vue项目通讯录_Vue实现类似通讯录功