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 相关文章推荐
对象无length属性时IE6/IE7中无法将其转换成伪数组(ArrayLike)
Jul 31 Javascript
利用Keydown事件阻止用户输入实现代码
Mar 11 Javascript
JQuery实现当鼠标停留在某区域3秒后自动执行
Sep 09 Javascript
jQuery中通过ajax调用webservice传递数组参数的问题实例详解
May 20 Javascript
JavaScript实现相册弹窗功能(zepto.js)
Jun 21 Javascript
如何在Angular.JS中接收并下载PDF
Nov 26 Javascript
Centos6.8下Node.js安装教程
May 12 Javascript
javascript  删除select中的所有option的实例
Sep 17 Javascript
Vue.use源码学习小结
Jun 20 Javascript
element-ui tree结构实现增删改自定义功能代码
Aug 31 Javascript
详解JavaScript 中的批处理和缓存
Nov 19 Javascript
一定要知道的 25 个 Vue 技巧
Nov 02 Vue.js
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中的日期处理方法集锦
2007/01/02 PHP
PHP Array交叉表实现代码
2010/08/05 PHP
PHP daddslashes 使用方法介绍
2012/10/26 PHP
php中chdir()函数用法实例
2014/11/13 PHP
基础的WordPress插件制作教程
2015/11/24 PHP
js小技巧--自动隐藏红叉叉
2007/08/13 Javascript
document.getElementById为空或不是对象的解决方法
2010/01/24 Javascript
jquery实现的一个导航滚动效果具体代码
2013/05/27 Javascript
jquery 面包屑导航 具体实现
2013/06/05 Javascript
Javascript拓展String方法小结
2013/07/08 Javascript
JavaScript var声明变量背后的原理示例解析
2013/10/12 Javascript
Jquery getJSON方法详细分析
2013/12/26 Javascript
js防止DIV布局滚动时闪动的解决方法
2014/10/30 Javascript
60行js代码实现俄罗斯方块
2015/03/31 Javascript
jquery实现图片上传前本地预览
2017/04/28 jQuery
Vue2.5 结合 Element UI 之 Table 和 Pagination 组件实现分页功能
2018/01/26 Javascript
如何在vue里添加好看的lottie动画
2018/08/02 Javascript
VUE v-for循环中每个item节点动态绑定不同函数的实例
2018/09/26 Javascript
spring+angular实现导出excel的实现代码
2019/02/27 Javascript
深入Node TCP模块的理解
2019/03/13 Javascript
关于微信小程序获取小程序码并接受buffer流保存为图片的方法
2019/06/07 Javascript
Vue2.4+新增属性.sync、$attrs、$listeners的具体使用
2020/03/08 Javascript
Python生成随机密码
2015/03/10 Python
Python3.x中自定义比较函数
2015/04/24 Python
Python和C/C++交互的几种方法总结
2017/05/11 Python
Python使用Pandas库实现MySQL数据库的读写
2019/07/06 Python
python requests库爬取豆瓣电视剧数据并保存到本地详解
2019/08/10 Python
Python实现桌面翻译工具【新手必学】
2020/02/12 Python
python xlsxwriter模块的使用
2020/12/24 Python
亚洲航空公司官方网站:AirAsia
2019/11/25 全球购物
写给老师的表扬信
2014/01/21 职场文书
市场部规章制度
2014/01/24 职场文书
本科毕业生求职自荐信
2014/04/09 职场文书
学习张丽丽心得体会
2014/09/03 职场文书
2015新年联欢晚会开场白
2014/12/14 职场文书
网络营销实训总结
2015/08/03 职场文书