Vue模擬數(shù)據(jù),實現(xiàn)路由進入商品詳情頁面的示例
一、路由
首先需要配置路由,就是點擊good組件進入goodDetail組件
配置路由如下
{ path: '/goodDetail', component:goodDetail }
同時在good組件中寫入如下點擊事件,路由中加入查詢參數(shù),也就是商品的id
//點擊路由到商品詳細信息頁 selectGood(){ router.push({ path: 'goodDetail', query:{goodId:this.goodDetail.id}}) }
二、在goodDetail組件中接收路由參數(shù)
goodDetail中的代碼如下
export default{ data(){ return { id: this.$route.query.goodId, loading: false, selectedGood: [] } }, created(){ this.fetchData(); }, methods:{ fetchData(){ this.loading = true; //拿到查詢字段,商品的id后進行http請求 var id = this.id; this.$http.get('/api/goods/' + id) .then(response => { this.selectedGood = response.data.data; }, error => { console.log(error); }) this.loading = false; } } }
可以看到我這里接收到路由參數(shù)的中的商品id后,發(fā)送了一個http請求,這時就需要本地mock數(shù)據(jù)
三、本地模擬數(shù)據(jù)
首先需要有一個data.json用來存放模擬的數(shù)據(jù),然后配置build目錄下的dev-server.js如下
//獲取mock數(shù)據(jù) var appData = require('../data.json'); var goods = appData.goods; var apiRoutes = express.Router(); apiRoutes.get('/goods', function (req, res) { res.json({ errno: 0, data: goods }); }) //拿到指定id的商品信息 apiRoutes.get('/goods/:id', function(req, res) { var id = req.params.id; function selectedGood(id){ for(var i = 0; i < goods.length; i++) { if(goods[i].id == id){ return goods[i]; } } } var good = selectedGood(id); res.json({ errno: 0, // data: goods[req.params.id] data: good }); }) app.use('/api', apiRoutes);
以上這篇Vue模擬數(shù)據(jù),實現(xiàn)路由進入商品詳情頁面的示例就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue填坑之webpack run build 靜態(tài)資源找不到的解決方法
今天小編就為大家分享一篇vue填坑之webpack run build 靜態(tài)資源找不到的解決方法。具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09詳解關(guān)于Vue版本不匹配問題(Vue packages version mismatch)
這篇文章主要介紹了詳解關(guān)于Vue版本不匹配問題(Vue packages version mismatch),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-09-09vue3超出文本展示el tooltip實現(xiàn)示例
這篇文章主要為大家介紹了vue3超出文本展示el tooltip實現(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-02-02解決Vue的項目使用Element ui 走馬燈無法實現(xiàn)的問題
這篇文章主要介紹了解決Vue的項目使用Element ui 走馬燈無法實現(xiàn)的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08