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')
    },