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 相关文章推荐
jquery 将disabled的元素置为enabled的三种方法
Jul 25 Javascript
javascript中的new使用
Mar 20 Javascript
jquery的flexigrid无法显示数据提示获取到数据
Jul 19 Javascript
使用jquery的ajax需要注意的地方dataType的设置
Aug 12 Javascript
js的window.showModalDialog及window.open用法实例分析
Jan 29 Javascript
原生JS实现美图瀑布流布局赏析
Sep 07 Javascript
酷! 不同风格页面布局幻灯片特效js实现
Feb 19 Javascript
实例教学如何写vue插件
Nov 30 Javascript
JavaScript基于面向对象实现的猜拳游戏
Jan 03 Javascript
JavaScript实现淘宝京东6位数字支付密码效果
Aug 18 Javascript
js变量声明var使用与不使用的区别详解
Jan 21 Javascript
Vue提供的三种调试方式你知道吗
Jan 18 Vue.js
微信小程序在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&amp;mysql(一)
2006/10/09 PHP
PHP检测移动设备类mobile detection使用实例
2014/04/14 PHP
PHP中的命名空间详细介绍
2015/07/02 PHP
Laravel中Trait的用法实例详解
2016/03/16 PHP
PHP命令Command模式用法实例分析
2018/08/08 PHP
javascript 拖放效果实现代码
2010/01/22 Javascript
jQuery蓝色风格滑动导航栏代码分享
2015/08/19 Javascript
JS实现复制内容到剪贴板功能兼容所有浏览器(推荐)
2016/06/17 Javascript
完美解决IE不支持Data.parse()的问题
2016/11/24 Javascript
深入理解jquery中的each用法
2016/12/14 Javascript
ReactJS实现表单的单选多选和反选的示例
2017/10/13 Javascript
JavaScript实现鼠标滚轮控制页面图片切换功能示例
2017/10/14 Javascript
vue打包后显示空白正确处理方法
2017/11/01 Javascript
使用Vue-Router 2实现路由功能实例详解
2017/11/14 Javascript
在Webpack中用url-loader处理图片和字体的问题
2020/04/28 Javascript
微信小程序实现上传照片代码实例解析
2020/08/04 Javascript
[47:42]完美世界DOTA2联赛PWL S2 GXR vs Ink 第一场 11.19
2020/11/20 DOTA
在Linux系统上安装Python的Scrapy框架的教程
2015/06/11 Python
Python分割指定页数的pdf文件方法
2018/10/26 Python
PyCharm鼠标右键不显示Run unittest的解决方法
2018/11/30 Python
python使用pymongo操作mongo的完整步骤
2019/04/13 Python
Python实现平行坐标图的两种方法小结
2019/07/04 Python
解决Django加载静态资源失败的问题
2019/07/28 Python
通过Turtle库在Python中绘制一个鼠年福鼠
2020/02/03 Python
python tkinter GUI绘制,以及点击更新显示图片代码
2020/03/14 Python
基于pycharm实现批量修改变量名
2020/06/02 Python
Hanro官网:奢华男士和女士内衣、睡衣和家居服
2018/10/25 全球购物
请用用Java代码写一个堆栈
2012/01/26 面试题
NET程序员上机面试题
2015/05/23 面试题
《记金华的双龙洞》教学反思
2014/04/19 职场文书
推荐信格式范文
2014/05/09 职场文书
低碳环保标语
2014/06/12 职场文书
电子商务求职信
2014/06/15 职场文书
2014年社区工作总结
2014/11/18 职场文书
信仰纪录片观后感
2015/06/08 职场文书
2015年社区反邪教工作总结
2015/10/14 职场文书