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判断、校验MAC地址的2个实例
May 05 Javascript
javaScript年份下拉列表框内容为当前年份及前后50年
May 28 Javascript
JS获取浏览器语言动态加载JS文件示例代码
Oct 31 Javascript
js+html5实现可在手机上玩的拼图游戏
Jul 17 Javascript
jquery跟随屏幕滚动效果的实现代码
Apr 13 Javascript
详解vue-cli + webpack 多页面实例配置优化方法
Jul 13 Javascript
AngularJS实现图片上传和预览功能的方法分析
Nov 08 Javascript
vue-cli开发时,关于ajax跨域的解决方法(推荐)
Feb 03 Javascript
vue-cli2 构建速度优化的实现方法
Jan 08 Javascript
详解Element 指令clickoutside源码分析
Feb 15 Javascript
Vue select 绑定动态变量的实例讲解
Oct 22 Javascript
微信小程序实现音乐播放页面布局
Dec 11 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面向对象——访问修饰符介绍
2012/11/08 PHP
smarty获得当前url的方法分享
2014/02/14 PHP
PHP实现的超长文本分页显示功能示例
2018/06/04 PHP
php和C#的yield迭代器实现方法对比分析
2019/07/17 PHP
Thinkphp5.0 框架视图view的比较标签用法分析
2019/10/12 PHP
JQuery UI皮肤定制
2009/07/27 Javascript
javascript中类的定义及其方式(《javascript高级程序设计》学习笔记)
2011/07/04 Javascript
自己动手手写jQuery插件总结
2015/01/20 Javascript
JS实现控制表格单元格垂直对齐的方法
2015/03/30 Javascript
javascript实现控制的多级下拉菜单
2015/07/05 Javascript
第六篇Bootstrap表格样式介绍
2016/06/21 Javascript
JavaScript中const、var和let区别浅析
2016/10/11 Javascript
基于JS组件实现拖动滑块验证功能(代码分享)
2016/11/18 Javascript
Vue header组件开发详解
2018/01/26 Javascript
基于Vue的延迟加载插件vue-view-lazy
2018/05/21 Javascript
Vue.js实现开发购物车功能的方法详解
2019/02/22 Javascript
Angular value与ngValue区别详解
2019/11/27 Javascript
Vue中qs插件的使用详解
2020/02/07 Javascript
原生JS实现烟花效果
2020/03/10 Javascript
django模型层(model)进行建表、查询与删除的基础教程
2017/11/21 Python
Python使用matplotlib填充图形指定区域代码示例
2018/01/16 Python
Pandas中把dataframe转成array的方法
2018/04/13 Python
详解python 注释、变量、类型
2018/08/10 Python
Python Pandas中根据列的值选取多行数据
2019/07/08 Python
python 判断字符串中是否含有汉字或非汉字的实例
2019/07/15 Python
Python3 assert断言实现原理解析
2020/03/02 Python
selenium携带cookies模拟登陆CSDN的实现
2021/01/19 Python
html5中localStorage本地存储的简单使用
2017/06/16 HTML / CSS
德国内衣、泳装和睡衣网上商店:Bigsize Dessous
2018/07/09 全球购物
宝信软件JAVA工程师面试经历
2012/08/19 面试题
数控个人求职信范文
2014/02/03 职场文书
技校毕业生自荐信
2014/06/03 职场文书
会计系毕业求职信
2014/08/07 职场文书
教师节倡议书2015
2015/04/27 职场文书
开天辟地观后感
2015/06/09 职场文书
幼师自荐信范文(2016推荐篇)
2016/01/28 职场文书