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 相关文章推荐
IE和Firefox下javascript的兼容写法小结
Dec 10 Javascript
javascript动画之圆形运动,环绕鼠标运动作小球
Jul 20 Javascript
使用Jquery来实现可以输入值的下拉选单 雏型
Dec 06 Javascript
用js实现控件的隐藏及style.visibility的使用
Jun 14 Javascript
JS常用正则表达式总结
Nov 12 Javascript
jQuery实现简单网页遮罩层/弹出层效果兼容IE6、IE7
Jun 16 Javascript
用js写的一个路由(简单实例)
Sep 24 Javascript
微信小程序 icon组件详细及实例代码
Oct 25 Javascript
Javascript设计模式之装饰者模式详解篇
Jan 17 Javascript
Vue.js项目中管理每个页面的头部标签的两种方法
Jun 25 Javascript
JS实现li标签的删除
Apr 12 Javascript
vue商城中商品“筛选器”功能的实现代码
Jul 01 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
Apache2 httpd.conf 中文版
2006/12/06 PHP
15种PHP Encoder的比较
2007/03/06 PHP
无JS,完全php面向过程数据分页实现代码
2012/08/27 PHP
php-fpm配置详解
2014/02/12 PHP
Yii结合CKEditor实现图片上传功能
2014/06/13 PHP
destoon整合ucenter后注册页面不跳转的解决方法
2014/06/21 PHP
正确的PHP匹配UTF-8中文的正则表达式
2015/05/13 PHP
基于PHP实现堆排序原理及实例详解
2020/06/19 PHP
JavaScript中通过闭包解决只能取得包含函数中任何变量最后一个值的问题
2010/08/12 Javascript
JSON+JavaScript处理JSON的简单例子
2013/03/20 Javascript
JavaScript实现的多种鼠标拖放效果
2015/11/03 Javascript
javascript实现图片轮播效果
2016/01/20 Javascript
jquery实现无刷新验证码的简单实例
2016/05/19 Javascript
js实现九宫格拼图小游戏
2017/02/13 Javascript
微信小程序 地图map实例详解
2017/06/07 Javascript
详解Webpack多环境代码打包的方法
2018/08/03 Javascript
基于ts的动态接口数据配置的详解
2019/12/18 Javascript
详谈Object.defineProperty 及实现数据双向绑定
2020/07/18 Javascript
前端vue如何使用高德地图
2020/11/05 Javascript
Vue 3.0中jsx语法的使用
2020/11/13 Javascript
JavaScript 声明私有变量的两种方式
2021/02/05 Javascript
python中的五种异常处理机制介绍
2014/09/02 Python
使用python实现个性化词云的方法
2017/06/16 Python
Python使用matplotlib模块绘制图像并设置标题与坐标轴等信息示例
2018/05/04 Python
Python3 修改默认环境的方法
2019/02/16 Python
基于python的itchat库实现微信聊天机器人(推荐)
2019/10/29 Python
软件测试工程师笔试题带答案
2015/03/27 面试题
酒店出纳岗位职责
2013/12/29 职场文书
少先队辅导员事迹材料
2014/12/24 职场文书
简历自我评价模板
2015/03/11 职场文书
公司仓库管理制度
2015/08/04 职场文书
Spring Boot mybatis-config 和 log4j 输出sql 日志的方式
2021/07/26 Java/Android
Redis高并发防止秒杀超卖实战源码解决方案
2021/11/01 Redis
Python+Matplotlib+LaTeX玩转数学公式
2022/02/24 Python
centos7安装mysql5.7经验记录
2022/05/02 Servers
Tomcat 与 maven 的安装与使用教程
2022/06/16 Servers