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 相关文章推荐
一个报数游戏js版(约瑟夫环问题)
Aug 05 Javascript
js动态创建标签示例代码
Jun 09 Javascript
javascript实现的多个层切换效果通用函数实例
Jul 06 Javascript
js表单提交和submit提交的区别实例分析
Dec 10 Javascript
详解Angularjs中的依赖注入
Mar 11 Javascript
jQuery中iframe的操作(点击按钮新增窗口)
Apr 20 Javascript
jQuery滑动到底部加载下一页数据的实例代码
May 22 jQuery
微信小程序排坑指南详解
May 23 Javascript
JS实现数组的增删改查操作示例
Aug 29 Javascript
微信小程序select下拉框实现效果
May 15 Javascript
小程序使用分包的示例代码
Mar 23 Javascript
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
Mar 01 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 存取 MySQL 数据库的一个例子
2006/10/09 PHP
linux下编译安装memcached服务
2014/08/03 PHP
php5.4传引用时报错问题分析
2016/01/22 PHP
PHP合并两个或多个数组的方法
2019/01/20 PHP
tp5 实现列表数据根据状态排序
2019/10/18 PHP
laravel框架语言包拓展实现方法分析
2019/11/22 PHP
Javascript图片上传前的本地预览实例
2014/06/16 Javascript
分享两款带遮罩的jQuery弹出框
2015/12/30 Javascript
简单了解JavaScript操作XPath的一些基本方法
2016/06/03 Javascript
js css自定义分页效果
2017/02/24 Javascript
jquery获取select,option所有的value和text的实例
2017/03/06 Javascript
微信小程序tabBar底部导航中文注解api详解
2017/08/16 Javascript
判断jQuery是否加载完成,没完成继续判断的解决方法
2017/12/06 jQuery
nodejs基于WS模块实现WebSocket聊天功能的方法
2018/01/12 NodeJs
JS中this的指向以及call、apply的作用
2018/05/06 Javascript
Vue实现一个无限加载列表功能
2018/11/13 Javascript
Vue实现的父组件向子组件传值功能示例
2019/01/19 Javascript
微信小程序身份证验证方法实现详解
2019/06/28 Javascript
javascript二维数组和对象的深拷贝与浅拷贝实例分析
2019/10/26 Javascript
vue 实现购物车总价计算
2019/11/06 Javascript
基于vue 动态菜单 刷新空白问题的解决
2020/08/06 Javascript
javascript实现下拉菜单效果
2021/02/09 Javascript
Python的动态重新封装的教程
2015/04/11 Python
Python中一些自然语言工具的使用的入门教程
2015/04/13 Python
Python计时相关操作详解【time,datetime】
2017/05/26 Python
Python 高级专用类方法的实例详解
2017/09/11 Python
Python BS4库的安装与使用详解
2018/08/08 Python
pygame游戏之旅 调用按钮实现游戏开始功能
2018/11/21 Python
Django框架ORM数据库操作实例详解
2019/11/07 Python
利用jupyter网页版本进行python函数查询方式
2020/04/14 Python
HTML5 Canvas——用路径描画线条实例介绍
2013/06/09 HTML / CSS
美国旅游网站:Tours4Fun
2017/02/17 全球购物
幼教求职信
2014/03/12 职场文书
教师党员个人剖析材料
2014/09/29 职场文书
2014年公务员个人工作总结
2014/11/22 职场文书
春节随笔
2015/08/15 职场文书