Vue编程式跳转的实例代码详解


Posted in Javascript onJuly 10, 2019

编程式跳转的实现代码,如下所示:

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

ps:下面看下vue 编程式js跳转路由

请看goNews()方法

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

总结

以上所述是小编给大家介绍的Vue编程式跳转的实例代码 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
Expandable &quot;Detail&quot; Table Rows
Aug 29 Javascript
JavaScript移除数组元素减少长度的方法
Sep 05 Javascript
JavaScript实现自动变换表格边框颜色
May 08 Javascript
jQuery实现仿腾讯视频列表分页效果的方法
Aug 07 Javascript
使用基于Node.js的构建工具Grunt来发布ASP.NET MVC项目
Feb 15 Javascript
js 上传文件预览的简单实例
Aug 16 Javascript
JavaScript中省略元素对数组长度的影响
Oct 26 Javascript
使用BootStrap进行轮播图的制作
Jan 06 Javascript
vue写一个组件
Apr 09 Javascript
js 数组详细操作方法及解析合集
Jun 01 Javascript
服务端预渲染之Nuxt(使用篇)
Apr 08 Javascript
JQuery Ajax如何实现注册检测用户名
Sep 25 jQuery
微信小程序在ios下Echarts图表不能滑动的问题解决
Jul 10 #Javascript
Vue事件修饰符native、self示例详解
Jul 09 #Javascript
如何自定义微信小程序tabbar上边框的颜色
Jul 09 #Javascript
微信小程序wx.request拦截器使用详解
Jul 09 #Javascript
javascript实现图片轮播代码
Jul 09 #Javascript
关于微信小程序map组件z-index的层级问题分析
Jul 09 #Javascript
Webpack 4如何动态切割JS注入文件名详解
Jul 09 #Javascript
You might like
PHP中的正规表达式(一)
2006/10/09 PHP
PHP面向对象分析设计的61条军规小结
2010/07/17 PHP
OfflineSave离线保存代码再次发布使用说明
2007/05/23 Javascript
禁用JavaScript控制台调试的方法
2014/03/07 Javascript
jQuery控制Div拖拽效果完整实例分析
2015/04/15 Javascript
vue插件tab选项卡使用小结
2016/10/27 Javascript
JS中如何实现Laravel的route函数详解
2017/02/12 Javascript
vue2.x select2 指令封装详解
2017/10/12 Javascript
微信小程序返回多级页面的实现方法
2017/10/27 Javascript
VUE2 前端实现 静态二级省市联动选择select的示例
2018/02/09 Javascript
vue-cli 如何打包上线的方法示例
2018/05/08 Javascript
vue input输入框模糊查询的示例代码
2018/05/22 Javascript
详解小程序开发经验:多页面数据同步
2019/05/18 Javascript
JS实现使用POST方式发送请求
2019/08/30 Javascript
vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多(步骤详解)
2020/01/14 Javascript
Node.js API详解之 net模块实例分析
2020/05/18 Javascript
vue+springboot+element+vue-resource实现文件上传教程
2020/10/21 Javascript
Pycharm 设置自定义背景颜色的图文教程
2018/05/23 Python
使用pandas把某一列的字符值转换为数字的实例
2019/01/29 Python
Python判断有效的数独算法示例
2019/02/23 Python
解决python DataFrame 打印结果不换行问题
2020/04/09 Python
Python实现播放和录制声音的功能
2020/08/12 Python
越南电子产品购物网站:FPT Shop
2017/12/02 全球购物
size?荷兰官方网站:英国高级运动鞋精品店
2020/07/24 全球购物
UNIX命令速查表
2012/03/10 面试题
CSS代码检查工具stylelint的使用方法详解
2021/03/27 HTML / CSS
会计应聘求职信范文
2013/12/17 职场文书
大学活动总结格式
2014/04/29 职场文书
村班子对照检查材料
2014/08/18 职场文书
实习生工作证明范本
2014/09/14 职场文书
融资合作协议书范本
2014/10/17 职场文书
安全承诺书格式范本
2015/04/28 职场文书
nginx 多个location转发任意请求或访问静态资源文件的实现
2021/03/31 Servers
python xlwt模块的使用解析
2021/04/13 Python
MYSQL如何查看进程和kill进程
2022/03/13 MySQL
10大幻兽系恶魔果实 蝙蝠果实上榜,第一自愈能力强
2022/03/18 日漫