关于vue-router路由的传参方式params query

更新时间：2023年10月08日 08:49:14 作者：Morning_xx

这篇文章主要介绍了关于vue-router路由的传参方式params query,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

vue-router路由的传参方式params query

1.$router 和 $route的区别

$router : 路由操作对象、操作路由、包括路由的跳转方法，钩子函数等、只写对象;
$route : 路由信息对象、获取路由信息、包括path，params，hash，query，fullPath，matched，name等路由信息参数、只读对象;

//操作 路由跳转
this.$router.push({
    name:'hello',
    params:{
        name:'word',
        age:'11'
    }    
})
//读取 路由参数接收
this.name = this.$route.params.name;
this.age = this.$route.param.age;

2.query传参

path配合
刷新页面参数不丢失

//query传参，使用path跳转
this.$router.push({
    path:'second',
    query:{
        queryId:'20230129',
        queryName:'Emma'
}
)}
//query传参接受
this.quertId = ths.$route.query.queryId
this.queryName = this.$route.query.queryName

3.params传参

和name配合
刷新页面参数会丢失

//params传参，使用name
this.$router.push({
    name:'second',
    params:{
        Id:'20230129',
        Name:'Emma'
}
)}
//query传参接受
this.Id = ths.$route.params.Id
this.Name = this.$route.params.Name 
//路由
{
path:'/second/:id/:name',
name:'second',
component:() => import('@/view/second')
}

vue-router路由传参，如果没参数的话就跳转回来

if (JSON.stringify(this.$route.params) == '{}') {
    this.$router.go(-1)
}

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Vite Vue3 EsLint Prettier配置步骤极简方法详解
这篇文章主要为大家介绍了Vite Vue3 EsLint Prettier配置步骤的极简方法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-09-09
解决vue-router在同一个路由下切换,取不到变化的路由参数问题
今天小编就为大家分享一篇解决vue-router在同一个路由下切换,取不到变化的路由参数问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
Vue项目中vue.config.js常用配置项详解
在 Vue CLI 创建的项目中,vue.config.js 是核心配置文件,用于定制化构建、开发和部署流程,本文详细解析了该文件的常用配置项,并结合代码示例和表格说明,帮助开发者高效管理项目配置,提升开发体验,需要的朋友可以参考下
2025-04-04
Vue子组件向父组件通信与父组件调用子组件中的方法
这篇文章主要介绍了Vue子组件向父组件通信与父组件调用子组件中的方法,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
2018-06-06
VUE django 跨域、csrf令牌的问题
在Vue和Django进行前后分离开发时,经常会遇到跨域和CSRF令牌验证问题,本文详细介绍了如何在Django后端设置视图获取CSRF令牌,并在Vue前端进行配置以确保安全的数据交互,文章提供了后端视图创建、settings配置以及前端axios请求封装的具体方法
2024-09-09
vue @vuelidate父子组件绑定注意事项
Vue@vuelidate父子组件验证时,不能直接绑定,需在子组件验证方法内部进行绑定,以避免父组件验证时包含子组件的验证
2025-02-02
vue多级多选菜单组件开发
这篇文章主要为大家分享了vue多级多选菜单组件开发案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-10-10
vue实现底部菜单功能
本文通过实例代码给大家介绍了vue实现底部菜单功能，代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧
2018-07-07
vue项目的访问端口及其设置方式
这篇文章主要介绍了vue项目的访问端口及其设置方式，具有很好的参考价值，希望对大家有所帮助。
2022-10-10
el-popover如何通过js手动控制弹出框显示、隐藏
最近项目中多次用到了Popover弹出框,下面这篇文章主要给大家介绍了关于el-popover如何通过js手动控制弹出框显示、隐藏的相关资料,需要的朋友可以参考下
2023-12-12