Vue页面跳转传递参数及接收方式


Posted in Javascript onSeptember 09, 2020

最近接触了vue项目,这里记录一下vue跳转到下一页面携带参数的两种方式。

典型应用场景:列表页跳转到详情页

一、配置路由

文件路径:src/router/config.php

import Vue from 'vue'
import Router from 'vue-router' 
import classify from '.././components/classify/classify.vue' 
import classifyChild from '.././components/classify/classifyChild.vue'
 
export default new Router({
 mode: 'history',
 routes: [
  {
   path: '/classify',
   name: ' classify',
   component: classify
  },
  {
   path: '/classify/classifyChild',
   name: 'classifyChild',
   component: classifyChild
  },
  
 ]
})

二、页面跳转及传参

//方式一
<router-link :to="{name:'classifyChild',params:{id:item.id}}">
  <button>跳转</button>
</router-link>
 
//方式二
<router-link :to="{path:'/classify/classifyChild',query:{id:item.id}}">
  <button>跳转</button>
</router-link>

三、参数接收

//对应于方式一
let id=this.$route.params.id;
 
//对应于方式二
let id=this.$route.query.id;

补充知识:关于vue3.0中的this.$router.replace({ path: '/'})刷新无效果问题

首先在store中定义所需要的变量可以进行初始化,再定义一个方法,登录成功后A页面,跳转到B页面之前,需要直接调用store中存储数据的方法,全局可以使用,顺序是,先调用store中的数据,其次调用sessionStorage和localStorage中的数据。

这样的话,可以避免A页面跳转B页面时候,手动刷新才显示信息。

直接登录成功后,直接调用store的方法,把值存储进去,B页面可以直接显示用户信息。必须在store定义方法,登录成功后调用方法进行回显用户信息。在这里插入图片描述

Vue页面跳转传递参数及接收方式

如此一来,就可以避免必须手动刷新一下才会显示信息。

以上这篇Vue页面跳转传递参数及接收方式就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery for与each性能比较分析
May 14 Javascript
js实现鼠标拖动图片并兼容IE/FF火狐/谷歌等主流浏览器
Jun 06 Javascript
JS控制图片等比例缩放的示例代码
Dec 24 Javascript
使用CSS3的scale实现网页整体缩放
Mar 18 Javascript
浅谈jQuery中 wrap() wrapAll() 与 wrapInner()的差异
Nov 12 Javascript
node.js中的socket.io的广播消息
Dec 15 Javascript
JavaScript控制listbox列表框的项目上下移动的方法
Mar 18 Javascript
JavaScript实现数字数组按照倒序排列的方法
Apr 06 Javascript
JavaScript实现类似拉勾网的鼠标移入移出效果
Oct 27 Javascript
Angular在一个页面中使用两个ng-app的方法(二)
Feb 20 Javascript
JS简单实现点击按钮或文字显示遮罩层的方法
Apr 27 Javascript
基于js实现复制内容到操作系统粘贴板过程解析
Oct 11 Javascript
微信小程序实现身份证取景框拍摄
Sep 09 #Javascript
vue实现点击按钮“查看详情”弹窗展示详情列表操作
Sep 09 #Javascript
微信小程序实现点击生成随机验证码
Sep 09 #Javascript
vue 获取元素额外生成的data-v-xxx操作
Sep 09 #Javascript
vue移动端写的拖拽功能示例代码
Sep 09 #Javascript
vue路由的配置和页面切换详解
Sep 09 #Javascript
JavaScript 实现下雪特效的示例代码
Sep 09 #Javascript
You might like
php使用类继承解决代码重复的问题
2015/02/11 PHP
php获取twitter最新消息的方法
2015/04/14 PHP
php递归遍历删除文件的方法
2015/04/17 PHP
PHP实现负载均衡下的session共用功能
2018/04/17 PHP
JavaScript的parseInt 进制问题
2009/05/07 Javascript
JavaScript 创建对象
2009/07/17 Javascript
JavaScript 异步调用框架 (Part 3 - 代码实现)
2009/08/04 Javascript
Jquery之Ajax运用 学习运用篇
2011/09/26 Javascript
关于微信jssdk实现多图片上传的一点心得分享
2016/12/13 Javascript
原生js实现倒计时功能(多种格式调用)
2017/01/12 Javascript
微信小程序  http请求封装详解及实例代码
2017/02/15 Javascript
利用Plupload.js解决大文件上传问题, 带进度条和背景遮罩层
2017/03/15 Javascript
vue中配置mint-ui报css错误问题的解决方法
2017/10/11 Javascript
Vue-cli-webpack搭建斗鱼直播步骤详解
2017/11/17 Javascript
JS实现的JSON序列化操作简单示例
2018/07/02 Javascript
vue实现自定义H5视频播放器的方法步骤
2019/07/01 Javascript
mpvue微信小程序的接口请求fly全局拦截代码实例
2019/11/13 Javascript
vue 动态添加class,三个以上的条件做判断方式
2020/11/02 Javascript
Python实现的生成自我描述脚本分享(很有意思的程序)
2014/07/18 Python
python和bash统计CPU利用率的方法
2015/07/10 Python
Python中getpass模块无回显输入源码解析
2018/01/11 Python
在Python中实现替换字符串中的子串的示例
2018/10/31 Python
Python 从相对路径下import的方法
2018/12/04 Python
Keras中 ImageDataGenerator函数的参数用法
2020/07/03 Python
Python实现打包成库供别的模块调用
2020/07/13 Python
纯CSS打造(无图像无js)的非常流行的讲话(语音)气泡效果
2012/12/28 HTML / CSS
幼儿园实习自我鉴定
2013/12/15 职场文书
政府法律服务方案
2014/06/14 职场文书
小学国庆节活动方案策划书
2014/09/16 职场文书
2014年十一国庆节爱国演讲稿
2014/09/23 职场文书
小学生差生评语
2014/12/29 职场文书
4S店销售内勤岗位职责
2015/04/13 职场文书
神州牡丹园的导游词
2019/11/20 职场文书
Python的代理类实现,控制访问和修改属性的权限你都了解吗
2022/03/21 Python
《战锤40K:暗潮》跳票至9月 公布新宣传片
2022/04/03 其他游戏
nginx 添加http_stub_status_module模块
2022/05/25 Servers