vue路由传递参数的几种方式详解
vue-router传递参数分为两大类:
编程式的导航 router.push
声明式的导航
编程式导航
1)编程式导航传递参数有两种类型:字符串、对象。
字符串
字符串的方式是直接将路由地址以字符串的方式来跳转,这种方式很简单但是不能传递参数:
this.$router.push(“home”);
对象
想要传递参数主要就是以对象的方式来写,分为两种方式:命名路由、查询参数,下面分别说明两种方式的用法和注意事项。
命名路由
命名路由的前提就是在注册路由的地方需要给路由命名如:
命名路由传递参数需要使用params来传递,这里一定要注意使用params不是query。目标页面接收传递参数时使用params。特别注意:命名路由这种方式传递的参数,如果在目标页面刷新是会出错的
使用方法如下:
this.$router.push({ name: ‘news’, params: { userId: 123 }})
代码如下:
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<button @click="routerTo">click here to news page</button>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
methods:{
routerTo(){
this.$router.push({ name: 'news', params: { userId: 123 }});
}
}
}
</script>
<style>
</style>
接受传递的参数:
<template>
<div>
this is the news page.the transform param is {{this.$route.params.userId}}
</div>
</template>
<script>
</script>
查询参数
查询参数其实就是在路由地址后面带上参数和传统的url参数一致的,传递参数使用query而且必须配合path来传递参数而不能用name,目标页面接收传递的参数使query。
注意:和name配对的是params,和path配对的是query
使用方法如下:
this.$router.push({ path: ‘/news’, query: { userId: 123 }});
代码如下:
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<button @click="routerTo">click here to news page</button>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
methods:{
routerTo(){
this.$router.push({ path: '/news', query: { userId: 123 }});
}
}
}
</script>
<style>
</style>
接收参数如下:
<template>
<div>
this is the news page.the transform param is {{this.$route.query.userId}}
</div>
</template>
<script>
</script>
运行效果如下:
声明式的导航
字符串
<router-link to="news">click to news page</router-link>
命名路由
<router-link :to="{ name: 'news', params: { userId: 1111}}">click to news page</router-link>
查询参数
<router-link :to="{ path: '/news', query: { userId: 1111}}">click to news page</router-link>
最后总结:路由传递参数和传统传递参数是一样的,命名路由类似表单提交而查询就是url传递,在vue项目中基本上掌握了这两种传递参数就能应付大部分应用了,最后总结为以下两点:
1.命名路由搭配params,刷新页面参数会丢失
2.查询参数搭配query,刷新页面数据不会丢失
3.接受参数使用this.$router后面就是搭配路由的名称就能获取到参数的值
相关文章
- vue 加载页面时触发时间_Vue 刷新页面时会触发事件吗「建议收藏」
- el-upload多文件上传_vue 界面
- VUE 路由入门
- Vue之插值操作
- 前端面试题:vue响应式原理 Vdom diff
- 10个关于 Vue 的高级开发技巧
- 2022前端经典vue面试题(持续更新中)
- vue 路由嵌套_vue路由实现方式
- vue elementui navmenu 多级导航菜单(水平、垂直)
- 支付宝授权登录淘宝_vue的登录实现
- Vue(27)vue-codemirror实现在线代码编译器「建议收藏」
- 解决Vue多次点击同一个路由的Uncaught (in promise)问题
- vue md5.js_VUE.js
- Vue入门(三)——网络/综合应用
- Vue(五)计算属性、过滤器、axios、vue 生命周期
- Vue-Router根据用户权限添加动态路由(侧边栏菜单)
- Vue路由传参的两种方式
- vue源码分析-响应式系统(一)_2023-02-27
- vue路由嵌套,配置children嵌套路由
- 微擎独立后台TP5+VUE分离+小程序
- vue路由守卫
- vue 路由 按需 keep-alive
- Vue-Router多级路由时,父组件重复加载的问题。
- vue.js入门篇之Vue.js 样式绑定
- Vue 实现前后端分离,安全连接 MSSQL 数据库(vue 连接mssql)
- Vue极致集成Redis,实现更优秀的性能(vue集成redis)
- Vue结合Redis,加快数据读取速度(vue读取redis)
- Vue如何连接Redis数据库(vue怎么连接Redis)
- 优化网站性能,Vue搭配Redis缓存更加有效(vue使用redis缓存)
- Vue中触发Redis订阅通知(vue中订阅redis)