一、路由

首先需要配置路由，就是點擊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)容了，希望能給大家一個參考，也希望大家多多支持錯新站長站。