美文网首页vue
前端小技巧(二):跳转页面

前端小技巧(二):跳转页面

作者: 荼蘼toome | 来源:发表于2020-02-16 17:58 被阅读0次

对于我这个新手小白来说。。vue真的好难呀
技能使用的vue +vant+axios+route

阿拉 真的一无所知

跳转页面--单介绍我使用遇到的解决方案来言

之 前使用的语法如下
<router-link to="./details">
直接跳转到具体页面

注意:不能够携带参数

于是,我将其改成通过点击事件跳转的方法
<div class="dui" @click="dui(item.id,item.jifen)">立即兑换</div>
this.$router.push("./details?id="+id+"&jifen="+jifen);

【接手页面的内容】
mounted生命周期中打印出this.$route.query
里面存放地址栏中的信息

之后,看到浏览器中的调试控制面板
看到matched 这个是路由匹配到的组件类
用来理解路由
其中携带很多参数
如:name 指得是跳转的页面名
path 地址
query 查询参数
fullpath 全部地址

相关文章

  • 前端小技巧(二):跳转页面

    对于我这个新手小白来说。。vue真的好难呀技能使用的vue +vant+axios+route 阿拉 真的一无...

  • jQuery滚动到页面指定位置

    文章作者:Tyan博客:noahsnail.com 在前端的页面开发中,经常会碰到页面跳转问题,这个跳转指的是页面...

  • wx小程序二

    一、小程序全局生命周期钩子: 二、 页面生命周期钩子 三、页面跳转 跳转到新页面 open-type值:

  • React Native 从入门到深入 -- Navigator

    前言 在前端的开发中,我们需要实现多个页面的切换跳转,iOS中使用Navigation实现页面的跳转,react ...

  • 微信小程序二

    一、小程序全局生命周期钩子: 二、 页面生命周期钩子 三、页面跳转 标签方式:通过navigator跳转 相当于...

  • 微信小程序2

    一、小程序全局生命周期钩子: 二、 页面生命周期钩子 三、页面跳转 标签方式:通过navigator跳转 相当于...

  • vx小程序二

    一、小程序全局生命周期钩子: 二、 页面生命周期钩子 三、页面跳转 标签方式:通过navigator跳转 相当于...

  • wx小程序二

    一、小程序全局生命周期钩子: 二、 页面生命周期钩子 三、页面跳转 标签方式:通过navigator跳转 相当于...

  • 微信小程序2

    一、小程序全局生命周期钩子: 二、 页面生命周期钩子 三、页面跳转 标签方式:通过navigator跳转 相当于...

  • 前端页面编程小技巧

    前端编程,对于初学者来说,不仅仅是需要每天去接受新知识,而且要训练你的编码速度和提高你的代码质量。那么要快速高效的...

网友评论

    本文标题:前端小技巧(二):跳转页面

    本文链接:https://www.haomeiwen.com/subject/fvhmfhtx.html