vue2中,根据list的id进入对应的详情页并修改title方法


Posted in Javascript onAugust 24, 2018

一般项目中,我们会遇到有个list。。。然后你随便点击一个,会进入他对应的详情页。。。正常,那个详情页是一个公共的组件,我们只需根据id传值来判断,这个页面显示的是哪个list的数据即可。如图:点击电影进入电影详情……以此类推

vue2中,根据list的id进入对应的详情页并修改title方法

vue2中,根据list的id进入对应的详情页并修改title方法

具体代码如下:

(有人会奇怪,我为什么不循环……这个是根据项目需求而定的,这个相当于入口,而进入里面分别对应的还是多个list,并且后台给的图片的url也不一样,我懒得v-if去写了,so,这三个我就用了通过了路由id过去。当然,后面有循环list。。两种不同的方式,大家根据自己的项目来选择就好微笑)

<template>
 <section class="club">
 <section class="img2_cont">
  <router-link to="/club/itemList/0">
  <section>
   <img :src="getContextPathSrc+movie_url">
   <p>电影 • 纪录片</p>
  </section>
  </router-link>
  <router-link to="/club/itemList/1">
  <section>
   <img :src="getContextPathSrc+music_url">
   <p>室内乐 • 下午茶</p>
  </section>
  </router-link>
  <router-link to="/club/itemList/2">
  <section>
   <img :src="getContextPathSrc+sport_url">
   <p>沙龙 • 讲谈</p>
  </section>
  </router-link>
 </section>
 </section>
</template>
<script>
 import api from './../fetch/api';
 import { mapGetters } from 'vuex';
 export default {
 name: 'club',
 data () {
  return {
  backMsg: {},
  movie_url: '',
  music_url: '',
  sport_url: '',
  }
 },
 computed: {
  ...mapGetters([
  'getContextPathSrc',
  'sessionId',
  'token'
  ])
 },
 created() {
 api.commonApi('后台接口url','params')
  .then(res => {
  this.backMsg = res.data;
 // 电影图片
 this.movie_url = res.data.IMG_LIST[0].IMG_URL;
 // 室内乐
 this.music_url = res.data.IMG_LIST[1].IMG_URL;
 // 体育图片
 this.sport_url = res.data.IMG_LIST[2].IMG_URL;
 })
 },
 }
</script>

而路由index.js里面需要如下写:

{
 path: 'itemList/:id',
 name: 'itemList',
 component: resolve => require(['components/club/itemList.vue'], resolve)
},

这样就完成了初步的列表进入对应的页面。有人会发现, 看我的截图,明显是有左右滑动的,这里是我把代码删掉了,因为那个不是我今天要巩固的= =。接下来,就是在对应页面是N个列表list,我们需要点击每个进入他所对应的详情页,而我也是用循环写的list(就是上面的第二张图片,推荐下的list太多了,不循环会死人的偷笑),具体代码如下:

<template>
 <div class="page-loadmore">
 <section class="Ctab">
  <p :class="{tActive:tActive}" @click="toRecommend()">推荐</p>
  <p :class="{lActive:lActive}" @click="toClassic()">经典</p>
 </section>
 <!-- 下拉加载更多产品列表 -->
 <load-more
  :bottom-method="loadBottom"
  :bottom-all-loaded="allLoaded"
  :bottomPullText='bottomText'
  :auto-fill="false"
  @bottom-status-change="handleBottomChange"
  ref="loadmore">
  <ul class="page-loadmore-list">
  <li v-for="(item,key) in backMsg" class="page-loadmore-listitem">
   <movie-type :item="item"></movie-type>
  </li>
  </ul>
  <div v-if="loading" slot="bottom" class="loading">
  <img src="./../../assets/main/uploading.gif">
  </div>
 </load-more>
 </div>
</template>
<script type="text/babel">
 import api from './../../fetch/api';
 import { mapGetters } from 'vuex';
 import LoadMore from './../common/loadmore.vue';
 import MovieType from './movieType.vue';
 export default {
 props:{
  TYPE: Number,
  backMsg: Array,
  dataType: String,
  loading: Boolean,
  allLoaded: Boolean,
  pageNo: Number,
 },
 data() {
  return {
  tActive: true,
  lActive: false,
  status: '',
  bottomText: '上拉加载更多...',
  };
 },
 computed: {
  ...mapGetters([
  'getContextPathSrc',
  'sessionId',
  'token'
  ]),
 },
 components: {
  LoadMore,
  MovieType
 },
 methods: {
  // 点击推荐按钮
  toRecommend: function() {
  this.tActive = true;
  this.lActive = false;
  this.$emit('toRecommend', {dataType: this.dataType, TYPE: this.TYPE});
  },
  // 点击经典按钮
  toClassic: function() {
  this.tActive = false;
  this.lActive = true;
  this.$emit('toClassic', {dataType: this.dataType, TYPE: this.TYPE});
  },
  // 加载更多的方法
  loadBottom: function() {
  alert(1)
  this.$emit('loadBottom', {dataType: this.dataType, TYPE: this.TYPE});
  },
  handleBottomChange(status) {
  this.bottomStatus = status;
  },
 },
 };
</script>

这里我把循环出的列表写了个单独的组件。movieType组件内容如下:

<template>
 <div class="page-loadmore">
 <router-link :to="'/club/itemDetail/'+item.ID">
  <section>
  <img :src="getContextPathSrc+item.IMG_URL" class="Pimg">
  <section>
   <h3>{{item.NAME}}</h3>
   <aside>
   <img src="../../assets/club/city.png">
   <span>{{item.CITY}}</span>
   </aside>
   <aside>
   <img src="../../assets/club/time.png">
   <span>{{item.START_DATE | movieTime}}-{{item.END_DATE | movieTime}}</span>
   </aside>
  </section>
  </section>
 </router-link>
 </div>
</template>
<script>
 import api from './../../fetch/api';
 import { mapGetters } from 'vuex';
 import LoadMore from './../common/loadmore.vue';
 export default {
 props:{
  item: Object,
 },
 data() {
  return {
  };
 },
 computed: {
  ...mapGetters([
  'getContextPathSrc',
  'sessionId',
  'token'
  ]),
 },
 };
</script>

当然,最重要的一步不能忘掉。。。我们需要修改路由index.js文件:

{
 path: 'itemDetail/:ID',
 name: 'itemDetail',
 component: resolve => require(['components/club/itemDetail.vue'], resolve)
},

这样就大功告成了。两种方法,喜欢哪种用哪种就好。。

以上这篇vue2中,根据list的id进入对应的详情页并修改title方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
说说掌握JavaScript语言的思想前提想学习js的朋友可以看看
Apr 01 Javascript
jQuery 树形结构的选择器
Feb 15 Javascript
JavaScript类和继承 this属性使用说明
Sep 03 Javascript
自编jQuery插件实现模拟alert和confirm
Sep 01 Javascript
codeMirror插件使用讲解
Jan 16 Javascript
Angularjs单选改为多选的开发过程及问题解析
Feb 17 Javascript
微信小程序 数据遍历的实现
Apr 05 Javascript
JS中判断某个字符串是否包含另一个字符串的五种方法
May 03 Javascript
解决vue props 拿不到值的问题
Sep 11 Javascript
vue 实现强制类型转换 数字类型转为字符串
Nov 07 Javascript
Element实现表格嵌套、多个表格共用一个表头的方法
May 09 Javascript
微信小程序以7天为周期连续签到7天功能效果的示例代码
Aug 20 Javascript
Nuxt.js实现校验访问浏览器类型的中间件
Aug 24 #Javascript
vue中使用gojs/jointjs的示例代码
Aug 24 #Javascript
vue操作下拉选择器获取选择的数据的id方法
Aug 24 #Javascript
浅谈Vue组件及组件的注册方法
Aug 24 #Javascript
JavaScript中this关键字用法实例分析
Aug 24 #Javascript
vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)
Aug 24 #Javascript
JavaScript原型链与继承操作实例总结
Aug 24 #Javascript
You might like
php的控制语句
2006/10/09 PHP
php实现搜索一维数组元素并删除二维数组对应元素的方法
2015/07/06 PHP
php无序树实现方法
2015/07/28 PHP
简单谈谈PHP中strlen 函数
2016/02/27 PHP
PHP用swoole+websocket和redis实现web一对一聊天
2019/11/05 PHP
你所要知道JS(DHTML)中的一些技巧
2007/01/09 Javascript
跨域表单提交状态的变相判断代码
2009/11/12 Javascript
基于jquery的jqDnR拖拽溢出的修改
2011/02/12 Javascript
使用js的replace()方法查找字符示例代码
2013/10/28 Javascript
js报$ is not a function 的问题的解决方法
2014/01/20 Javascript
js仿土豆网带缩略图的焦点图片切换效果实现方法
2015/02/23 Javascript
浅谈jQuery 选择器和dom操作
2016/06/07 Javascript
jquery实现网页定位导航
2016/08/23 Javascript
javascript实现简单的ajax封装示例
2016/12/28 Javascript
bootstrap中的 form表单属性role=&quot;form&quot;的作用详解
2017/01/20 Javascript
BootStrap selectpicker后台动态绑定数据
2017/06/01 Javascript
webpack2.0配置postcss-loader的方法
2017/08/17 Javascript
如何利用nodejs自动定时发送邮件提醒(超实用)
2020/12/01 NodeJs
解决Tensorflow安装成功,但在导入时报错的问题
2018/06/13 Python
详解Python with/as使用说明
2018/12/13 Python
在Pycharm中设置默认自动换行的方法
2019/01/16 Python
python pytest进阶之fixture详解
2019/06/27 Python
python 给图像添加透明度(alpha通道)
2020/04/09 Python
Python中的__init__作用是什么
2020/06/09 Python
用python批量移动文件
2021/01/14 Python
aden + anais英国官网:美国婴儿贴身用品品牌
2019/09/08 全球购物
Vivo俄罗斯官方在线商店:中国智能手机品牌
2019/10/04 全球购物
System.Array.CopyTo()和System.Array.Clone()有什么区别
2016/06/20 面试题
什么是.net
2015/08/03 面试题
经典促销广告词大全
2014/03/19 职场文书
公务员试用期满考核材料
2014/05/22 职场文书
关于做家务的心得体会
2016/01/23 职场文书
《玩出了名堂》教学反思
2016/02/17 职场文书
2019最新婚庆对联集锦!
2019/07/10 职场文书
基于python的matplotlib制作双Y轴图
2021/04/20 Python
OpenCV项目实践之停车场车位实时检测
2022/04/11 Python