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 相关文章推荐
xml转json的js代码
Aug 28 Javascript
IE不支持getElementsByClassName最终完美解决方案
Dec 17 Javascript
JQuery入门——用one()方法绑定事件处理函数(仅触发一次)
Feb 05 Javascript
jquery 实现二级/三级/多级联动菜单的思路及代码
Apr 08 Javascript
jQuery插件支持同一页面被多次调用
Feb 14 Javascript
简单几步实现返回顶部效果
Dec 05 Javascript
jquery submit()不能提交表单的解决方法
Apr 24 jQuery
微信小程序判断用户是否需要再次授权获取个人信息
Jul 18 Javascript
vue请求服务器数据后绑定不上的解决方法
Oct 30 Javascript
JavaScript中的this基本问题实例小结
Mar 09 Javascript
JavaScript中的各种宽高属性的实现
May 08 Javascript
Vue Render函数创建DOM节点代码实例
Jul 08 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
基于mysql的bbs设计(三)
2006/10/09 PHP
PHP 自定义错误处理函数的使用详解
2013/05/10 PHP
浅析SVN常见问题及解决方法
2013/06/21 PHP
php中过滤非法字符的具体实现
2013/10/29 PHP
腾讯QQ微博API接口获取微博内容
2013/10/30 PHP
php在apache环境下实现gzip配置方法
2015/04/02 PHP
php中smarty区域循环的方法
2015/06/11 PHP
php中替换字符串函数strtr()和str_repalce()的用法与区别
2016/11/25 PHP
在 Laravel 中 “规范” 的开发短信验证码发送功能
2017/10/26 PHP
PHP延迟静态绑定的深入讲解
2018/04/02 PHP
JS效率个人经验谈(8-15更新),加入range技巧
2007/01/09 Javascript
javascript里的条件判断
2007/02/27 Javascript
JavaScript setTimeout和setInterval的使用方法 说明
2010/03/25 Javascript
qTip 基于JQuery的Tooltip插件[兼容性好]
2010/09/01 Javascript
纯js实现背景图片切换效果代码
2010/11/14 Javascript
javascript自适应宽度的瀑布流实现思路
2013/02/20 Javascript
JavaScript使用pop方法移除数组最后一个元素用法实例
2015/04/06 Javascript
五种js判断是否为整数类型方式
2015/12/03 Javascript
Bootstrap表单Form全面解析
2016/06/13 Javascript
Bootstrap源码解读排版(1)
2016/12/23 Javascript
详解使用angularjs的ng-options时如何设置默认值(初始值)
2017/07/18 Javascript
详解.vue文件解析的实现
2018/06/11 Javascript
[58:37]Serenity vs Fnatic 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
Python中的Classes和Metaclasses详解
2015/04/02 Python
Python 获取指定文件夹下的目录和文件的实现
2019/08/30 Python
python已协程方式处理任务实现过程
2019/12/27 Python
python 字符串的驻留机制及优缺点
2020/06/19 Python
html5 input输入实时检测以及延时优化
2018/07/18 HTML / CSS
EJB面试题
2015/07/28 面试题
大学生入党自我鉴定
2013/10/31 职场文书
汽车维修专业个人求职信范文
2014/01/01 职场文书
优秀毕业生找工作自荐信
2014/06/23 职场文书
大学生实习证明范本
2014/09/19 职场文书
不同意离婚答辩状
2015/05/22 职场文书
Golang原生rpc(rpc服务端源码解读)
2022/04/07 Golang
在windows server 2012 r2中安装mysql的详细步骤
2022/07/23 Servers