vue路由跳转传参数
时间:2022-05-06
本文章向大家介绍vue路由跳转传参数,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
1. router-link
<router-link
:to="{
path: 'yourPath',
params: {
name: 'name',
dataObj: data
},
query: {
name: 'name',
dataObj: data
}
}">
</router-link>
1. path -> 是要跳转的路由路径,也可以是路由文件里面配置的 name 值,两者都可以进行路由导航
2. params -> 是要传送的参数,参数可以直接key:value形式传递
3. query -> 是通过 url 来传递参数的同样是key:value形式传递
// 2,3两点皆可传递
2. $router方式跳转
// 组件 a
<template>
<button @click="sendParams">传递</button>
</template>
<script>
export default {
name: '',
data () {
return {
msg: 'test message'
}
},
methods: {
sendParams () {
this.$router.push({
path: 'yourPath',
name: '要跳转的路径的 name,在 router 文件夹下的 index.js 文件内找',
params: {
name: 'name',
dataObj: this.msg
}
/*query: {
name: 'name',
dataObj: this.msg
}*/
})
}
},
computed: {
},
mounted () {
}
}
</script>
<style scoped></style>
----------------------------------------
// 组件b
<template>
<h3>msg</h3>
</template>
<script>
export default {
name: '',
data () {
return {
msg: ''
}
},
methods: {
getParams () {
// 取到路由带过来的参数
let routerParams = this.$route.params.dataobj
// 将数据放在当前组件的数据内
this.msg = routerParams
}
},
watch: {
// 监测路由变化,只要变化了就调用获取路由参数方法将数据存储本组件即可
'$route': 'getParams'
}
}
</script>
<style scoped></style>
- [Silverlight动画]转向行为 - 躲避行为
- WCF后续之旅(1): WCF是如何通过Binding进行通信的
- CaseStudy(showcase)布局篇-列表的排放与遮罩
- [Silverlight动画]转向行为 - 追捕行为
- 前端三大框架vue,angular,react大杂烩
- CaseStudy(showcase)布局篇-如何做一个自适应窗口大小的布局
- WCF后续之旅(2): 如何对Channel Layer进行扩展——创建自定义Channel
- [Silverlight动画]转向行为 - 到达行为
- Asp.Net统一前后端提示信息方案
- 人工智能:未来决策制定的机遇与影响
- CaseStudy(showcase)界面篇-导出xaml以及放入Blend的技巧
- [Silverlight动画]转向行为 - 避开行为
- CaseStudy(showcase)界面篇-desing设计界面
- [Silverlight动画]转向行为 - 寻找行为
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- android实现记住用户名和密码以及自动登录
- Android碎片fragment实现静态加载的实例代码
- android异步消息机制 源码层面彻底解析(1)
- /undefinedcss/modules/layer/default/layer.css?v=3.1.1找不到的问题
- Android实现渐变启动页和带有指示器的引导页
- the input device is not a TTY. If you are using mintty, try prefixing the comma
- 【STM32F407】第13章 RL-TCPnet V7.X之创建多个TCP客户端
- RecyclerView实现列表倒计时
- wsl设置默认账户为root(ubuntu18.04)
- LeetCode No.14 最长公共前缀
- android异步消息机制 从源码层面解析(2)
- beego解决跨域问题:options请求、axios post请求跨域问题
- Android ListView列表实现倒计时
- [-Flutter 自组篇-] 蛛网图+绘制+动画实践
- Kotlin类型系统竟如此简单