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 相关文章推荐
硬盘浏览程序,保存成网页格式便可使用
Dec 03 Javascript
jQuery 使用手册(一)
Sep 23 Javascript
Javascript insertAfter() 实现函数代码
Oct 12 Javascript
js onmousewheel事件多次触发问题解决方法
Oct 17 Javascript
JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例
Dec 04 Javascript
利用AJAX实现WordPress中的文章列表及评论的分页功能
May 17 Javascript
AngularJS模块详解及示例代码
Aug 17 Javascript
bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果
Jun 12 jQuery
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
Feb 27 jQuery
vue.js+elementUI实现点击左右箭头切换头像功能(类似轮播图效果)
Sep 05 Javascript
Vue.js计算机属性computed和methods方法详解
Oct 12 Javascript
一篇文章看懂JavaScript中的回调
Jan 05 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数组保存文本与文本反编成数组实例
2014/11/13 PHP
PHP扩展开发教程(总结)
2015/11/04 PHP
PHP实现十进制、二进制、八进制和十六进制转换相关函数用法分析
2017/04/25 PHP
thinkPHP5分页功能实现方法分析
2017/10/25 PHP
mongodb和php的用法详解
2019/03/25 PHP
Thinkphp5.0框架视图view的模板布局用法分析
2019/10/12 PHP
javascript不同页面传值的改进版
2008/09/30 Javascript
Web开发者必备的12款超赞jQuery插件
2010/12/03 Javascript
JavaScript 匿名函数(anonymous function)与闭包(closure)
2011/10/04 Javascript
浅析webapp框架AngularUI的demo
2014/12/21 Javascript
PHP+jQuery实现随意拖动层并即时保存拖动位置
2015/04/30 Javascript
JS设置下拉列表框当前所选值的方法
2015/12/22 Javascript
angularjs 源码解析之scope
2016/08/22 Javascript
JS实现图片居中悬浮效果
2017/12/25 Javascript
浅谈vue项目可以从哪些方面进行优化
2018/05/05 Javascript
详解如何用VUE写一个多用模态框组件模版
2018/09/27 Javascript
vue实现按需加载组件及异步组件功能
2019/05/27 Javascript
p5.js临摹动态图形的方法
2019/10/23 Javascript
vue.js this.$router.push获取不到params参数问题
2020/03/03 Javascript
[01:12]DOTA2次级职业联赛 - Newbee.Y 战队宣传片
2014/12/01 DOTA
Python OS模块常用函数说明
2015/05/23 Python
详解Django中的过滤器
2015/07/16 Python
浅谈Scrapy框架普通反爬虫机制的应对策略
2017/12/28 Python
Python 获取中文字拼音首个字母的方法
2018/11/28 Python
解决使用PyCharm时无法启动控制台的问题
2019/01/19 Python
python 的 scapy库,实现网卡收发包的例子
2019/07/23 Python
HTML 5.1来了 9月份正式发布 更新内容预览
2016/04/26 HTML / CSS
js正则匹配markdown里的图片标签的实现
2021/03/24 Javascript
英语专业学生个人求职信范文
2014/01/06 职场文书
小学数学国培感言
2014/03/10 职场文书
幼儿园中班开学寄语
2014/04/03 职场文书
施工工地安全标语
2014/06/07 职场文书
港澳通行证委托书怎么写
2014/08/02 职场文书
2014年班级工作总结范文
2014/12/23 职场文书
工作违纪检讨书范文
2015/01/26 职场文书
公司财务部岗位职责
2015/04/14 职场文书