经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » HTML/CSS » HTML5 » 查看文章
Vue编程式跳转
来源:cnblogs  作者:des雷锋  时间:2019/7/10 11:31:58  对本文有异议

编程式跳转

  1. <template>
  2. <ul class = "prolist">
  3. <!-- //产品 -->
  4. <!-- :to = "/detail/item.id" -->
  5. <!-- 声明式跳转 :to = "{ name: 'detail',params: { id: item.id } }" -->
  6. <!-- <router-link :to = "{ name: 'detail',params: { id: item.id } }" tag = "li" class = "proitem" v-for="(item,index) of iss" :key='index'>
  7. <div class = "itemimg">
  8. <img :src="item.images.small" :alt="item.alt">
  9. </div>
  10. <div class = "iteminfo">
  11. <h3>{{ item.title }}</h3>
  12. <div class = "directors">
  13. <span v-for="(itm,idx) of item.directors" :key="idx">
  14. {{ itm.name }}/
  15. </span>
  16. </div>
  17. <Rating :rating='(item.rating.average / 2).toFixed(1)' />
  18. </div>
  19. </router-link> -->
  20. <!-- 编程式跳转 -->
  21. <!-- @click="godetail(item.id) -->
  22. <li class = "proitem" v-for="(item,index) of iss" @click="goDetail(item.id)" :key='index'>
  23. <div class = "itemimg">
  24. <img :src="item.images.small" :alt="item.alt">
  25. </div>
  26. <div class = "iteminfo">
  27. <h3>{{ item.title }}</h3>
  28. <div class = "directors">
  29. 导演:<span v-for="(itm,idx) of item.directors" :key="idx">
  30. {{ itm.name }}/
  31. </span>
  32. </div>
  33. <div class = "casts">
  34. 演员:<span v-for="(itm,idx) of item.casts" :key="idx">
  35. {{ itm.name }}/
  36. </span>
  37. </div>
  38. <Rating :rating="(item.rating.average / 2).toFixed(1)"/>
  39. </div>
  40. </li>
  41. </ul>
  42. </template>
  1. <script>
  2. import Rating from '@/components/common/Rating'
  3. export default {
  4. methods: {
  5. goDetail (id) {
  6. // console.log(this.$router)
  7. // this.$router.push('/detail/' + id) //id由函数获得
  8. // this.$router.push({ name: 'detail', params: { id: id } }) // 另一种方法
  9. this.$router.push({ path: '/detail/' + id }) // 另一种方法
  10. }
  11. },
  12. props: ['iss'],
  13. components: {
  14. Rating
  15. }
  16. }
  17. </script>

router.js:

  1. {
  2. // path: '/detail',
  3. path: '/detail/:id', // 详情需要配一个id,获取遍历
  4. name: 'detail',
  5. component: () => import('./views/detail/index.vue')
  6. },

原文链接:http://www.cnblogs.com/wangqingjiu/p/11160942.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号