編程式跳轉(zhuǎn)的實(shí)現(xiàn)代碼,如下所示:
<template> <ul class = "prolist">  <!-- //產(chǎn)品 -->  <!-- :to = "/detail/item.id" -->  <!-- 聲明式跳轉(zhuǎn) :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> -->  <!-- 編程式跳轉(zhuǎn) -->  <!-- @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">     導(dǎo)演:<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由函數(shù)獲得   // 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', // 詳情需要配一個(gè)id,獲取遍歷   name: 'detail',   component: () => import('./views/detail/index.vue')  },ps:下面看下vue 編程式j(luò)s跳轉(zhuǎn)路由
請(qǐng)看goNews()方法
<template>  <!-- 所有的內(nèi)容要被根節(jié)點(diǎn)包含起來(lái) -->  <div id="home">      我是首頁(yè)組件    <button @click="goNews()">通過(guò)js跳轉(zhuǎn)到新聞頁(yè)面</button>  </div></template><script>  export default{    data(){      return {                msg:'我是一個(gè)home組件'      }    },    methods:{      goNews(){        // 注意:官方文檔寫錯(cuò)了        //第一種跳轉(zhuǎn)方式        // this.$router.push({ path: 'news' })        // this.$router.push({ path: '/content/495' });        //另一種跳轉(zhuǎn)方式          //  { path: '/news', component: News,name:'news' },          // router.push({ name: 'news', params: { userId: 123 }})          this.$router.push({ name: 'news'})      }    }  }</script><style lang="scss" scoped></style>            
新聞熱點(diǎn)
疑難解答
圖片精選