Vue模拟数据,实现路由进入商品详情页面的示例


Posted in Javascript onAugust 31, 2018

一、路由

首先需要配置路由,就是点击good组件进入goodDetail组件

配置路由如下

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

同时在good组件中写入如下点击事件,路由中加入查询参数,也就是商品的id

//点击路由到商品详细信息页
  selectGood(){
  router.push({
   path: 'goodDetail',
   query:{goodId:this.goodDetail.id}})
  }

二、在goodDetail组件中接收路由参数

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;
  }
 }
 }

可以看到我这里接收到路由参数的中的商品id后,发送了一个http请求,这时就需要本地mock数据

三、本地模拟数据

首先需要有一个data.json用来存放模拟的数据,然后配置build目录下的dev-server.js如下

//获取mock数据
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模拟数据,实现路由进入商品详情页面的示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
[原创]js与自动伸缩图片 自动缩小图片的多浏览器兼容的方法总结
Mar 12 Javascript
JS 常用校验函数
Mar 26 Javascript
window.navigate 与 window.location.href 的使用区别介绍
Sep 21 Javascript
浅析基于WEB前端页面的页面内容搜索的实现思路
Jun 10 Javascript
javascript中解析四则运算表达式的算法和示例
Aug 11 Javascript
javascript运算符语法全面概述
Jul 14 Javascript
基于Vuejs实现购物车功能
Aug 02 Javascript
JavaScript 身份证号有效验证详解及实例代码
Oct 20 Javascript
Vue.js实现简单ToDoList 前期准备(一)
Dec 01 Javascript
jquery实现自适应banner焦点图
Feb 16 Javascript
详解关于表格合并span-method方法的补充(表格数据由后台动态返回)
May 21 Javascript
JS数组及对象遍历方法代码汇总
Jun 16 Javascript
JS实现百度网盘任意文件强制下载功能
Aug 31 #Javascript
angular1.x ui-route传参的三种写法小结
Aug 31 #Javascript
angularJs中跳转到指定的锚点实例($anchorScroll)
Aug 31 #Javascript
Angular 利用路由跳转到指定页面的指定位置方法
Aug 31 #Javascript
Vue 莹石摄像头直播视频实例代码
Aug 31 #Javascript
JavaScript实现简单的隐藏式侧边栏功能示例
Aug 31 #Javascript
Vue加载组件、动态加载组件的几种方式
Aug 31 #Javascript
You might like
PHP中MD5函数使用实例代码
2008/06/07 PHP
php读取csv文件后,uft8 bom导致在页面上显示出现问题的解决方法
2013/08/10 PHP
php几个预定义变量$_SERVER用法小结
2014/11/07 PHP
smarty高级特性之对象的使用方法
2015/12/25 PHP
php图片添加文字水印实现代码
2016/03/15 PHP
微信支付开发维权通知实例
2016/07/12 PHP
用javascript实现画板的代码
2007/09/05 Javascript
JavaScript中各种编码解码函数的区别和注意事项
2010/08/19 Javascript
解析dom中的children对象数组元素firstChild,lastChild的使用
2013/07/10 Javascript
js和php如何获取当前url的内容
2013/09/22 Javascript
浅谈jQuery事件绑定原理
2015/01/02 Javascript
快速获取/设置iframe内对象元素的几种js实现方法
2016/05/20 Javascript
JavaScript实现图片轮播组件代码示例
2016/11/22 Javascript
防止页面url缓存中ajax中post请求的处理方法
2017/10/10 Javascript
VUE预渲染及遇到的坑
2018/09/03 Javascript
ES6 fetch函数与后台交互实现
2018/11/14 Javascript
微信小程序收货地址API兼容低版本解决方法
2019/05/18 Javascript
如何进行微信公众号开发的本地调试的方法
2019/06/16 Javascript
改进 JavaScript 和 Rust 的互操作性并深入认识 wasm-bindgen 组件
2019/07/13 Javascript
Vue实现数据表格合并列rowspan效果
2020/11/30 Javascript
使用jQuery实现掷骰子游戏
2019/10/24 jQuery
js实现拖动缓动效果
2020/01/13 Javascript
vue3.0中使用element的完整步骤
2021/03/04 Vue.js
[01:50]2014DOTA2西雅图邀请赛 专访欢乐周宝龙
2014/07/08 DOTA
python基于K-means聚类算法的图像分割
2019/10/30 Python
Python3 实现减少可调用对象的参数个数
2019/12/20 Python
深入浅析python变量加逗号,的含义
2020/02/22 Python
Python Selenium 设置元素等待的三种方式
2020/03/18 Python
python3爬虫中异步协程的用法
2020/07/10 Python
Python用SSH连接到网络设备
2021/02/18 Python
纯css3无js实现的Android Logo(有简单动画)
2013/01/21 HTML / CSS
html5自动播放mov格式视频的实例代码
2020/01/14 HTML / CSS
招商业务员岗位职责
2013/12/16 职场文书
永远跟党走演讲稿
2014/09/12 职场文书
同学聚会通知书
2015/04/20 职场文书
html5移动端禁止长按图片保存的实现
2021/04/20 HTML / CSS