Vue页面跳转传递参数及接收方式
更新时间：2020年09月09日 15:42:51 作者：不二青春
这篇文章主要介绍了Vue页面跳转传递参数及接收方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
最近接触了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页面跳转传递参数及接收方式就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
在看这篇文章的几点要求：需要你先知道Vuex与Vue-Router是个什么东西，用来解决什么问题，以及它的基本使用。如果你还不懂的话，建议上官网了解下Vuex与Vue-Router的基本使用后再回来看这篇文章2022-11-11
在前端项目开发中,读写Excel文件的需求变得越来越常见,本文将详细介绍如何在Vue项目中利用FileReader对象和xlsx模块来读取Excel文件的内容,需要的可以参考下2024-03-03
Vue 解决在element中使用$notify在提示信息中换行问题
这篇文章主要介绍了Vue 解决在element中使用$notify在提示信息中换行问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
这篇文章主要介绍了vue中v-show和v-if的异同 ，通过代码详解v-show用法，本文给大家介绍的非常详细具有一定的参考借鉴价值,需要的朋友可以参考下2019-06-06
这篇文章主要介绍了如何解决ElementUI导航栏重复点菜单报错问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
这篇文章主要介绍了vue3.0 proxy设置代理不成功的问题及解决方案,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2023-12-12
今天封装一个导航栏的组件,使用的Element的NavMenu组件。遇到一个问题，本文主要介绍了Element el-menu中NavMenu的用法，感兴趣的可以了解一下2023-04-04
这篇文章主要为大家详细介绍了基于vue组件实现猜数字游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
Vue-cli assets SubDirectory及PublicPath区别详解
这篇文章主要介绍了Vue-cli assets SubDirectory及PublicPath区别详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-08-08
这篇文章主要给大家介绍了关于vue项目开启gzip压缩功能的相关资料,gizp压缩是一种http请求优化方式,通过减少文件体积来提高加载速度,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2023-07-07
最新评论