真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

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

一、路由

網(wǎng)站建設(shè)哪家好，找成都創(chuàng)新互聯(lián)！專注于網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、微信小程序定制開(kāi)發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了硯山免費(fèi)建站歡迎大家使用！

首先需要配置路由，就是點(diǎn)擊good組件進(jìn)入goodDetail組件

配置路由如下

 {
  path: '/goodDetail',
  component:goodDetail
 }

同時(shí)在good組件中寫(xiě)入如下點(diǎn)擊事件，路由中加入查詢參數(shù)，也就是商品的id

//點(diǎn)擊路由到商品詳細(xì)信息頁(yè)
  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后進(jìn)行http請(qǐng)求
  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ā)送了一個(gè)http請(qǐng)求，這時(shí)就需要本地mock數(shù)據(jù)

三、本地模擬數(shù)據(jù)

首先需要有一個(gè)data.json用來(lái)存放模擬的數(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ù),實(shí)現(xiàn)路由進(jìn)入商品詳情頁(yè)面的示例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持創(chuàng)新互聯(lián)。

網(wǎng)頁(yè)題目：Vue模擬數(shù)據(jù),實(shí)現(xiàn)路由進(jìn)入商品詳情頁(yè)面的示例
當(dāng)前鏈接：http://weahome.cn/article/gcospo.html