Vue模擬數(shù)據(jù),實現(xiàn)路由進入商品詳情頁面的示例

更新時間：2018年08月31日 15:50:31 作者：HaiJing1995

今天小編就為大家分享一篇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-cli3跨域配置的簡單方法
這篇文章主要給大家介紹了關(guān)于vue-cli3跨域配置的簡單方法，文中通過示例代碼介紹的非常詳細，對大家學(xué)習(xí)或者使用vue-cli3具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
2019-09-09
vue中的總線機制(EventBus)解析
這篇文章主要介紹了vue中的總線機制(EventBus)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-10-10
詳解Vue-router嵌套路由
這篇文章主要為大家介紹了Vue-router的嵌套路由，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2021-11-11
利用Vue.js+Node.js+MongoDB實現(xiàn)一個博客系統(tǒng)（附源碼）
本文主要介紹了利用Vue.js+Node.js+MongoDB實現(xiàn)一個博客系統(tǒng)，這個博客使用Vue做前端框架，Node+express做后端，數(shù)據(jù)庫使用的是MongoDB。實現(xiàn)了用戶注冊、用戶登錄、博客管理、文章編輯、標簽分類等功能，需要的朋友可以參考學(xué)習(xí)。
2017-04-04
Vue3中使用jsx/tsx的教程詳解
這篇文章主要為大家詳細介紹了如何在Vue3中使用jsx/tsx的相關(guān)知識,文中的示例代碼講解詳細,具有一定的借鑒價值,需要的小伙伴可以了解下
2024-02-02
Vue?+?Element?實現(xiàn)按鈕指定間隔時間點擊思路詳解
這篇文章主要介紹了Vue?+?Element?實現(xiàn)按鈕指定間隔時間點擊,實現(xiàn)思路大概是通過加一個本地緩存的時間戳，通過時間戳計算指定時間內(nèi)不能點擊按鈕，具體實現(xiàn)代碼跟隨小編一起看看吧
2023-12-12
vue.js 實現(xiàn)點擊展開收起動畫效果
這篇文章主要介紹了vue.js 實現(xiàn)點擊展開收起動畫效果，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-07-07
Vue3在css中使用v-bind綁定js/ts變量(在scss和less中使用方式)
v-bind是Vue.js中的一個核心指令,用于在Vue組件或DOM元素上綁定數(shù)據(jù)屬性,下面這篇文章主要給大家介紹了關(guān)于Vue3在css中使用v-bind綁定js/ts變量的相關(guān)資料,也可以在scss和less中使用方式,需要的朋友可以參考下
2024-04-04
vue?tailwindcss安裝配置教程示例詳解
這篇文章主要為大家介紹了vue?tailwindcss安裝配置教程示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
2023-09-09
vue 本地環(huán)境跨域請求proxyTable的方法
今天小編就為大家分享一篇vue 本地環(huán)境跨域請求proxyTable的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-09-09