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

<template>  <!-- 所有的內容要被根節點包含起來 -->  <div id="home">      我是首頁組件    <button @click="goNews()">通過js跳轉到新聞頁面</button>  </div></template><script>  export default{    data(){      return {                msg:'我是一個home組件'      }    },    methods:{      goNews(){        // 注意：官方文檔寫錯了        //第一種跳轉方式        // this.$router.push({ path: 'news' })        // this.$router.push({ path: '/content/495' });        //另一種跳轉方式          //  { path: '/news', component: News,name:'news' },          // router.push({ name: 'news', params: { userId: 123 }})          this.$router.push({ name: 'news'})      }    }  }</script><style lang="scss" scoped></style>