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

<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>