Vue編程式跳轉

編程式跳轉

<template>
  <ul class = "prolist">
    <!-- //產品 -->
    <!-- :to = "/detail/item.id" -->
    <!-- 聲明式跳轉 :to = "{ name: 'detail',params: { id: item.id } }" -->
    <!-- <router-link :to = "{ name: 'detail',params: { id: item.id } }" tag = "li" class = "proitem" v-for="(item,index) of iss" :key='index'>
      <div class = "itemimg">
       <img :src="item.images.small" :alt="item.alt">
      </div>
      <div class = "iteminfo">
        <h3>{{ item.title }}</h3>
        <div class = "directors">
          <span v-for="(itm,idx) of item.directors" :key="idx">
            {{ itm.name }}/
          </span>
        </div>
        <Rating :rating='(item.rating.average / 2).toFixed(1)' />
      </div>
    </router-link> -->

    <!-- 編程式跳轉 -->
    <!-- @click="godetail(item.id) -->
    <li class = "proitem" v-for="(item,index) of iss" @click="goDetail(item.id)" :key='index'>
      <div class = "itemimg">
       <img :src="item.images.small" :alt="item.alt">
      </div>
      <div class = "iteminfo">
        <h3>{{ item.title }}</h3>
        <div class = "directors">
          導演:<span v-for="(itm,idx) of item.directors" :key="idx">
            {{ itm.name }}/
          </span>
        </div>
        <div class = "casts">
           演員:<span v-for="(itm,idx) of item.casts" :key="idx">
            {{ itm.name }}/
          </span>
        </div>
        <Rating :rating="(item.rating.average / 2).toFixed(1)"/>
      </div>
    </li>
  </ul>
</template>

<script>
import Rating from '@/components/common/Rating'

export default {
  methods: {
    goDetail (id) {
      // console.log(this.$router)
      // this.$router.push('/detail/' + id) //id由函數得到
      // this.$router.push({ name: 'detail', params: { id: id } }) // 另外一種方法
      this.$router.push({ path: '/detail/' + id }) // 另外一種方法
    }
  },
  props: ['iss'],
  components: {
    Rating
  }
}
</script>

router.js:

{
      // path: '/detail',
      path: '/detail/:id', // 詳情須要配一個id，獲取遍歷
      name: 'detail',
      component: () => import('./views/detail/index.vue')
    },