vue params、query传参使用详解
最近在学习Vue，本文介绍了vue params、query传参使用，分享给大家，也给自己留个笔记
声明式：<router-link :to="...">
编程式：router.push(...)
这两种方式 都可以实现跳转链接，在上篇文章继续，通过A组件跳转链接到B组件并且传参数。
1、router.push使用
router/index.js
export default new Router({
routes: [
{
path: '/',
name: 'A',
component: require('../components/A')
},
{
path: '/B/:name/:age',
name: 'B',
component: require('../components/B')
}
]
})
上边，在路由中为B组件添加两个参数 name ,age
A组件，绑定一个@click事件，跳转B组件传参 使用params
<template>
<div> <!---只允许有一个最外层标签 ！-->
<div>
<p>{{message}}</p>
<p @click="toBFun">跳转B组件啊啊</p>
<!--<router-link :to="{ path: '/B',params:{name:'zs',age:22}}">跳转B组件啊啊</router-link>-->
</div>
</div>
</template>
<script>
export default {
data: function () {
return {
message: 'vue好帅啊！'
}
},
methods: {
toBFun: function(){
this.$router.push({name:'B',params:{name:'xy',age:22}});
}
}
}
</script>
<style>
</style>
这时浏览器会显示 ：http://localhost:8080/#/B/xy/22
在看下query 传值及地址变化
同样在 router/index.js路由文件中 不变有两个参数name,age
{
path: '/B/:name/:age',
name: 'B',
component: require('../components/B')
}
在A组件中，之前参数传递是通过params,
this.$router.push({name:'B',params:{name:'xy',age:22}});
替换后，query
this.$router.push({name:'B',query:{name:'xy',age:22}});
这时浏览器会发现：http://localhost:8080/#/?name=xy&age=22
通过以上两种，页面刷新后，参数还会保留的。
获取值有些不相同：
params：this.$route.params.name;
query:this.$route.query.name;
------------------------ 还有种方式--------------------------------------------
使用 router-link
<router-link :to="{ path: '/B',query:{name:'张飞',age:22}}">跳转B组件</router-link>
跳转后，浏览器地址为：http://localhost:8080/#/B?name=zzz&age=22
跟 this.$router.push(...) 是一样的
<router-link :to="{path:'/B/123'}">
跳转B组件</router-link>
</div>
{
path: '/B/:name',
name: 'B',
component: require('../components/B')
}
取值
this.$route.params.name
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue实现动态控制el-table表格列的展示与隐藏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
这篇文章主要为大家详细介绍了vue.js开发环境的安装教程，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
解决element ui cascader 动态加载回显问题
这篇文章主要介绍了element ui cascader 动态加载回显问题解决方法,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-08-08
moment是一款多语言支持的日期处理类库, 在vue中如何使用呢?这篇文章主要给大家介绍了关于vue之moment使用的相关资料,需要的朋友可以参考下2021-05-05
随着前端技术的不断发展,地图应用在我们的项目中越来越常见,本文将介绍如何在Vue3项目中集成高德地图,并通过简单的配置实现地图的平移和缩放功能,需要的朋友可以参考下2024-09-09
浅谈ElementUI中switch回调函数change的参数问题
今天小编就为大家分享一篇浅谈ElementUI中switch回调函数change的参数问题，具有很好的价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
vue+echarts实现可拖动节点的折线图（支持拖动方向和上下限的设置）
制作一个折线图用于显示当前24小时的数据，并且可以通过拖动折现图设置数据，接下来通过本文给大家分享vue+echarts实现可拖动节点的折线图（支持拖动方向和上下限的设置），感兴趣的朋友跟随一起学习吧2019-04-04
这篇文章主要介绍了Vue实现一个无限加载列表功能,需要的朋友可以参考下2018-11-11
Vue3中使用Element Plus时el-icon无法显示的问题解决
我们的Vue前端一般都是用的ElementUI,其中按钮可能用到的比较多,官方里面有自带的一些默认图标,下面这篇文章主要给大家介绍了关于Vue3中使用Element Plus时el-icon无法显示的问题解决,需要的朋友可以参考下2022-03-03
Element的el-tree控件后台数据结构的生成以及方法的抽取
这篇文章主要介绍了Element的el-tree控件后台数据结构的生成以及方法的抽取，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-03-03
最新评论