关于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)
}

总结

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

您可能感兴趣的文章:

vue-router next(false) 禁止访问某个页面时,不保留历史访问记录问题
这篇文章主要介绍了vue-router next(false) 禁止访问某个页面时,不保留历史访问记录问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-11-11
vue中el表单的简单查询方法
本文主要介绍了vue中el表单的简单查询方法,主要包括表单页面根据groupid 、type 、errortype进行数据过滤,感兴趣的可以了解一下
2023-10-10
写一个Vue Popup组件
这篇文章主要介绍了写一个Vue Popup组件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-02-02
Vue中使用Swiper简单封装组件示例
这篇文章主要为大家介绍了Vue中使用Swiper简单封装组件示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-08-08
关于Vue的 watch、computed和methods的区别汇总
这篇文章主要介绍关于Vue的 watch、computed和methods的区别，下面文章将围绕Vue的 watch、computed和methods的续航管资料展开全文它们之间区别的内容,需要的朋友可以参考一下，希望能帮助到大家
2021-11-11
Vue项目实现换肤功能的一种方案分析
这篇文章主要介绍了Vue项目实现换肤功能的一种方案分析，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-08-08
解决Vue中引入swiper,在数据渲染的时候,发生不滑动的问题
今天小编就为大家分享一篇解决Vue中引入swiper,在数据渲染的时候,发生不滑动的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
vue首次赋值不触发watch的解决方法
今天小编就为大家分享一篇vue首次赋值不触发watch的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
vue前端如何将任意文件转为base64传给后端
这篇文章主要介绍了vue前端如何将任意文件转为base64传给后端问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03
Vue实现高德坐标转GPS坐标功能的示例详解
生活中常用的几种坐标有：WGS-84、GCJ-02与BD-09。本文将利用Vue实现高德坐标转GPS坐标功能，即实现GCJ-02坐标转换成WGS-84坐标，需要的可以参考一下
2022-04-04