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

总结

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

您可能感兴趣的文章:

Vue3中watch的使用详解
这篇文章主要介绍了Vue3中watch的详解,主要包括Vue2使用watch及Vue3使用watch的方法，通过多种情况实例代码相结合给大家详细讲解，需要的朋友可以参考下
2022-11-11
bootstrap vue.js实现tab效果
这篇文章主要为大家详细介绍了bootstrap vue.js实现tab效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-02-02
vue3组合式api实现v-lazy图片懒加载的方法实例
vue作为前端主流的3大框架之一,目前在国内有着非常广泛的应用,下面这篇文章主要给大家介绍了关于vue3组合式api实现v-lazy图片懒加载的相关资料,需要的朋友可以参考下
2022-09-09
分享Vue子组件接收父组件传值的3种方式
这篇文章主要给大家分享的是Vue子组件接收父组件传值的3种方式，主要通过声明接收、接收数据的同时进行类型限制、接收数据的同时对数据类型、必要性、默认值进行限制相关内容展开更多详细的相关资料，需要的小伙伴可以参考一下
2022-03-03
vue双向锚点实现过程简易版(scrollIntoView)
这篇文章主要介绍了vue双向锚点实现过程简易版(scrollIntoView),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-07-07
vue3 使用socket的完整代码
这篇文章主要介绍了vue3 使用socket的完整代码,包括vue3客户端和服务端的实例讲解,本文给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
2024-03-03
Vue插槽slot详细介绍(对比版本变化,避免踩坑)
Vue中的Slot对于编写可复用可扩展的组件是再合适不过了,下面这篇文章主要给大家介绍了关于Vue插槽slot详细介绍的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-06-06
使用Vue中 v-for循环列表控制按钮隐藏显示功能
这篇文章主要介绍了使用Vue中 v-for循环列表控制按钮隐藏显示功能,需要的朋友可以参考下
2019-04-04
Vue 实现展开折叠效果的示例代码
这篇文章主要介绍了Vue 实现展开折叠效果的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-08-08
Vue实现选项卡tab切换制作
这篇文章主要为大家详细介绍了Vue实现选项卡tab切换制作，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-03-03