vue 2 에서 list 의 id 에 따라 해당 하 는 상세 페이지 에 들 어가 title 방법 을 수정 합 니 다.

일반 항목 에서 우 리 는 list 를 만 날 수 있 습 니 다.그리고 당신 이 마음대로 하 나 를 클릭 하면 그 가 대응 하 는 상세 한 페이지 에 들 어 갈 것 입 니 다.정상 입 니 다.그 상세 페이지 는 공공 구성 요소 입 니 다.우 리 는 id 전송 값 에 따라 이 페이지 가 어떤 list 의 데 이 터 를 표시 하 는 지 판단 하면 됩 니 다.그림:영 화 를 클릭 하여 영화 에 들 어 가 는 상세 한 상황.


구체 적 인 코드 는 다음 과 같다.
(누 군 가 는 내 가 왜 순환 하지 않 는 지 이상 할 것 이다......................................................................물론 뒤에 순환 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)
},

이렇게 해서 큰 성 과 를 거 두 었 다.두 가지 방법,좋아 하 는 것 을 쓰 면 됩 니 다.
이 vue 2 에 서 는 list 의 id 에 따라 해당 하 는 상세 한 페이지 에 들 어가 title 방법 을 수정 하 는 것 이 바로 편집장 이 여러분 에 게 공유 하 는 모든 내용 입 니 다.참고 하 시기 바 랍 니 다.여러분 들 도 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.