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的当鼠标滚轮到最底端继续加载新数据思路分享(多用于微博、空间、论坛 )
Oct 10 Javascript
自己使用jquery写的一个无缝滚动的插件
Apr 30 Javascript
Javascript字符串浏览器兼容问题分析
Dec 01 Javascript
使用jQuery不判断浏览器高度解决iframe自适应高度问题
Dec 16 Javascript
jQuery使用CSS()方法给指定元素同时设置多个样式
Mar 26 Javascript
jQuery插件scroll实现无缝滚动效果
Apr 27 Javascript
javascript实现根据函数名称字符串动态执行函数的方法示例
Dec 28 Javascript
JS常见DOM节点操作示例【创建 ,插入,删除,复制,查找】
May 14 Javascript
JSON.stringify()方法讲解
Jan 31 Javascript
微信小程序激励式视频广告组件使用详解
Dec 06 Javascript
JS运算符简单用法示例
Jan 19 Javascript
vue 图片裁剪上传组件的实现
Nov 12 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
javascript+php实现根据用户时区显示当地时间的方法
2015/03/11 PHP
WordPress中给文章添加自定义字段及后台编辑功能区域
2015/12/19 PHP
php实现基于PDO的预处理示例
2017/03/28 PHP
PHP中TP5 上传文件的实例详解
2017/07/31 PHP
laravel框架中路由设置,路由参数和路由命名实例分析
2019/11/23 PHP
最新28个很棒的jQuery 教程
2011/05/28 Javascript
js查错流程归纳
2012/05/04 Javascript
javascript的创建多行字符串的7种方法
2014/04/29 Javascript
初始Nodejs
2014/11/08 NodeJs
微信小程序 location API接口详解及实例代码
2016/10/12 Javascript
Javascript oop设计模式 面向对象编程简单实例介绍
2016/12/13 Javascript
vue移动端实现下拉刷新
2018/04/22 Javascript
解决Angular4项目部署到服务器上刷新404的问题
2018/08/31 Javascript
jquery分页优化操作实例分析
2019/08/23 jQuery
vue获取data数据改变前后的值方法
2019/11/07 Javascript
微信小程序顶部导航栏可滑动并选中放大
2019/12/05 Javascript
Javascript原生ajax请求代码实例
2020/02/20 Javascript
Vue computed 计算属性代码实例
2020/04/22 Javascript
vue el-tree 默认展开第一个节点的实现代码
2020/05/15 Javascript
jQuery实现倒计时功能完整示例
2020/06/01 jQuery
python中的实例方法、静态方法、类方法、类变量和实例变量浅析
2014/04/26 Python
python动态参数用法实例分析
2015/05/25 Python
利用numpy实现一、二维数组的拼接简单代码示例
2017/12/15 Python
单利模式及python实现方式详解
2018/03/20 Python
利用Pycharm断点调试Python程序的方法
2018/11/29 Python
python+opencv打开摄像头,保存视频、拍照功能的实现方法
2019/01/08 Python
使用Python做定时任务及时了解互联网动态
2019/05/15 Python
TensorFlow2.0使用keras训练模型的实现
2021/02/20 Python
乡镇党的群众路线教育实践活动制度建设计划
2014/11/03 职场文书
财产分割协议书范本
2014/11/03 职场文书
离职报告范文
2014/11/04 职场文书
沈阳故宫导游词
2015/01/31 职场文书
2015年扫黄打非工作总结
2015/05/13 职场文书
go语言中fallthrough的用法说明
2021/05/06 Golang
nginx配置之并发频次限制
2022/04/18 Servers
JS前端宏任务微任务及Event Loop使用详解
2022/07/23 Javascript