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 相关文章推荐
飞鱼(shqlsl) javascript作品集
Dec 16 Javascript
JavaScript 继承机制的实现(待续)
May 18 Javascript
学习面向对象之面向对象的基本概念:对象和其他基本要素
Nov 30 Javascript
jQuery为iframe的body添加click事件的实现代码
Apr 07 Javascript
JavaScript初学者建议:不要去管浏览器兼容
Feb 04 Javascript
js 事件截取enter按键页面提交事件示例代码
Mar 04 Javascript
js创建对象的区别示例介绍
Jul 24 Javascript
js实现简单随机抽奖的方法
Jan 27 Javascript
JS之获取样式的简单实现方法(推荐)
Sep 13 Javascript
JavaScript基础之AJAX简单的小demo
Jan 29 Javascript
Webpack path与publicPath的区别详解
May 03 Javascript
详解JavaScript 中 if / if...else...替换方式
Jul 15 Javascript
微信小程序在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 数字左侧自动补0
2008/03/31 PHP
php session的应用详细介绍
2017/03/22 PHP
详解PHP中的外观模式facade pattern
2018/02/05 PHP
PHP+JS实现的实时搜索提示功能
2018/03/13 PHP
解决Laravel5.x的php artisan migrate数据库迁移创建操作报错SQLSTATE[42000]
2020/04/06 PHP
通用于ie和firefox的函数 GetCurrentStyle (obj, prop)
2006/12/27 Javascript
十分钟打造AutoComplete自动完成效果代码
2009/12/26 Javascript
禁止js文件缓存的代码
2010/04/09 Javascript
15款jQuery分布引导插件分享
2015/02/04 Javascript
javascript中函数作为参数调用的方法
2015/02/09 Javascript
JavaScript简单实现鼠标移动切换图片的方法
2016/02/23 Javascript
JavaScript实现简单的日历效果
2016/09/25 Javascript
js 判断登录界面的账号密码是否为空
2017/02/08 Javascript
JavaScript实现获取用户单击body中所有A标签内容的方法
2017/06/05 Javascript
详解Vue路由开启keep-alive时的注意点
2017/06/20 Javascript
详解VUE单页应用骨架屏方案
2019/01/17 Javascript
ES6 let和const定义变量与常量的应用实例分析
2019/06/27 Javascript
通过实例了解JS 连续赋值
2019/09/24 Javascript
js实现从右往左匀速显示图片(无缝轮播)
2020/06/29 Javascript
[00:37]DOTA2上海特级锦标赛 OG战队宣传片
2016/03/03 DOTA
python通过wxPython打开一个音频文件并播放的方法
2015/03/25 Python
探索Python3.4中新引入的asyncio模块
2015/04/08 Python
python中map、any、all函数用法分析
2015/04/21 Python
python使用线程封装的一个简单定时器类实例
2015/05/16 Python
python的mysqldb安装步骤详解
2017/08/14 Python
教你用Python创建微信聊天机器人
2020/03/31 Python
python实现公司年会抽奖程序
2019/01/22 Python
Python实用库 PrettyTable 学习笔记
2019/08/06 Python
Django怎么在admin后台注册数据库表
2020/11/14 Python
XML文档定义有几种形式?它们之间有何本质区别?解析XML文档有哪几种方式?
2016/01/12 面试题
自学考试自我鉴定范文
2013/09/26 职场文书
《数星星的孩子》教学反思
2014/04/11 职场文书
人事任命书格式
2014/06/05 职场文书
小学校本培训方案
2014/06/06 职场文书
2014国庆黄金周超市促销活动方案
2014/09/21 职场文书
志愿者个人总结
2015/03/03 职场文书