vue中this.$router.push()路由传值和获取的两种常见方法汇总

 更新时间:2022年12月15日 10:15:45   作者:小白探索世界欧耶!~  
这篇文章主要介绍了vue中this.$router.push()路由传值和获取的两种常见方法,本文结合示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

           今天接到了比较大的需求,由于这个公司的接口调用方法和上一段实习那家公司的写法很不一样,我花了很多时间在摸索,“踏出第一步总是最困难的”,果然没错,第一个很费劲,但完成之后有了思路,下面的任务也就完成得更顺利了一些。简单记录一下吧!

主要步骤:

1.首先要配置一下接口

【api.js】

2.在使用的地方先引入方法

【跳转到的页面】

3.调用的时候要注意是传什么类型的参数,不然请求不回想要的数据

【切记切记看一下接口文档】

4.配置跳转路由,并传出参数(注意类型)

【今天我一开始传了个对象类型:"userKey":"5",旁边的姐姐帮我看了一下,最后改成了userKey:5传过去,果然就返回了正确的数据。】

5.在跳转到的页面中,一定要记得取出参数 this.$route.query/param(看情况)

【有些是传递参数,有些是查询参数,有点区别】

 今天一开始没有头绪的,主要是通过一个博主的文章得到了启发,感谢他!

一、关于点击事件实现跳转并传递参数的方法

用到了this.$router.push()

1.首先我们要定义一个点击事件
2.在定义事件中调用this.$router.push()方法

<template>
	<button @click = "handle">点击跳转</button>
</template>
<script>
    export default{
        methods:{
            handle (){
            //  路径/home对应我在router目录下index.js中定义的path属性值
                this.$router.push('/home');
            }
        }
    }
</script>

 目标跳转页面路由在router目录下index.js定义如下:

export default new Router({
  routes: [
    {
      path: '/home',
      name:'Home',
      component: Home,
    },
 ]
})

二、this.$router.push()中的参数规则

参数为字符串,即路径名称

//  路径/home对应router目录下index.js中定义的path属性值
this.$router.push('/home');

参数为对象

//  对应router目录下index.js中定义的path
this.$router.push({path:'/home'});

参数为路由命名

//  对应router目录下index.js中定义的name
this.$router.push({name:'Home'});

带传递参数

// params里面放置的是我们要传递过去的参数
this.$router.push({name:'Home',params:{user:'david'}});

 带查询参数

// 带查询参数,传递过去的内容会自动拼接变成/home?user=david
this.$router.push({path:'/home',query:{user:'david'}});

三、参数的接收

当我们使用params进行传参时,只需在接收参数的地方使用this.$route.params进行接收即可

//传参
this.$router.push({name:'Home',params:{user:'david'}});
 
// 在name为Home的组件中接收参数
const id=this.$route.params.id;
console.log(this.$route.params);//打印结果为{user:'david'}

当我们使用query传参时,只需在接收参数的地方使用this.$route.query进行接收即可,用法同上
!!!这里有一个小细节:$符号后面跟的是route不是router,跳转的时候 $后面跟的是router!!!

四、传递的参数是对象或数组        

还有一种情况就是,如果通过query方式传递的是 对象或数组 ,在地址栏中会被强制转换成[object Object],刷新后页获取不到对象值。

        那么我们可以通过JSON.stringify()方法将参数转换为字符串,在获取参数时通过JSON.parse转换成对象。

let parObj = JSON.stringify(obj)
// 路由跳转
this.$router.push({
   path:'/detail',
   query:{
       obj:parObj
   }
})
 
// 详情页获取参数
JSON.parse(this.$route.query.obj)

注意:这样虽然可以传对象,但是如果数据多的话地址栏会很长(不太推荐)。 使用props配合组件路由解耦:

①路由配置中指定参数:id

// 路由配置
{
   path:'/detail/:id',
   name:'detail',
   component:Detail,
   props:true  // 如果props设置为true,$route.params将被设置为组件属性  
}
 
// 路由跳转
this.$router.push({
   path:`/detail/${id}`
})
 
// 详情页获取参数
export default {
  props:['id'],  // 将路由中传递的参数id解耦到组件的props属性上
  mounted(){
    console.log("id",this.id);  
  }
}
②路由配置中未指定参数
// 路由配置
{
   path:'/detail',
   name:'detail',
   component:Detail,
   props:true  // 如果props设置为true,$route.params将被设置为组件属性  
}
 
// 路由跳转
this.$router.push({
   name:'detail',
   params:{
       order:{
         id:'123456789',
         name:'商品名称'  
       }
   }
})
 
// 详情页获取参数
export default {
  props:['order'],  // 将路由中传递的参数order解耦到组件的props属性上
  mounted(){
    console.log("order",this.order);  
  }
}

注意 用${JSON.stringify(this.data)}取数据有长度限制,所以会取不出来数据,换成setStorageSync和getStorageSync就好了

一开始:

结果取不出来

修改后:

取出来了

 query传参的参数会带在url后边展示在地址栏(/home?user=david),params传参的参数不会展示到地址栏

this.$route.query(刷新页面后参数不会丢失)

this.$route.params(刷新页面后参数会丢失)

由于动态路由也是传递params的,所以在 this.$router.push() 方法中path不能和params一起使用,否则params将无效,需要用name来指定页面
我们也可以用this.$router.replace()来实现页面跳转,二者的区别是push跳转之后可以通过浏览器的回退键回到原来的页面,而一旦使用replace跳转之后,无法回到原来页面

到此这篇关于vue中this.$router.push()路由传值和获取的两种常见方法汇总的文章就介绍到这了,更多相关vue 中this.$router.push()路由传值和获取内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue中点击下载图片的实现方法

    vue中点击下载图片的实现方法

    这篇文章主要给大家介绍了关于vue中点击下载图片的实现方法,在Vue的模板中,我们可以将下载属性绑定至或元素上,用来实现点击下载,需要的朋友可以参考下
    2023-08-08
  • Vue实现购物小球抛物线的方法实例

    Vue实现购物小球抛物线的方法实例

    这篇文章主要给大家介绍了Vue实现购物小球抛物线的方法实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-11-11
  • vue实现下拉菜单树

    vue实现下拉菜单树

    这篇文章主要为大家详细介绍了vue实现下拉菜单树,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-10-10
  • 基于vuejs+webpack的日期选择插件

    基于vuejs+webpack的日期选择插件

    这篇文章主要为大家详细介绍了基于vuejs+webpack的日期选择插件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-11-11
  • 基于Vue实现图片在指定区域内移动的思路详解

    基于Vue实现图片在指定区域内移动的思路详解

    这篇文章主要介绍了基于Vue实现图片在指定区域内移动,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-11-11
  • Element ui中menu组件(el-menu/el-menu-item/el-submenu/template)层级结构与用法示例

    Element ui中menu组件(el-menu/el-menu-item/el-submenu/template)

    最近在使用Element开发时遇到了不少问题,下面这篇文章主要给大家介绍了关于Element ui中menu组件(el-menu/el-menu-item/el-submenu/template)层级结构与用法的相关资料,需要的朋友可以参考下
    2022-12-12
  • vue使用动态组件实现TAB切换效果完整实例

    vue使用动态组件实现TAB切换效果完整实例

    在实际项目开发中,我们经常会遇到选项卡切换,对于一个前端工程师来说,组件化/模块化开发是一种必备的行为规范,下面这篇文章主要给大家介绍了关于vue使用动态组件实现TAB切换效果的相关资料,需要的朋友可以参考下
    2023-05-05
  • vue引入elementUi后打开页面报错Uncaught TypeError的解决方式

    vue引入elementUi后打开页面报错Uncaught TypeError的解决方式

    这篇文章主要给大家介绍了关于vue引入elementUi后打开页面报错Uncaught TypeError: Cannot read properties of undefined(reading ‘prototype‘)的解决方式,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2022-08-08
  • Vue+Typescript中在Vue上挂载axios使用时报错问题

    Vue+Typescript中在Vue上挂载axios使用时报错问题

    这篇文章主要介绍了Vue+Typescript中在Vue上挂载axios使用时报错问题,本文给大家介绍的非常详细,具有一定的参考借鉴价值 ,需要的朋友可以参考下
    2019-08-08
  • vue-quill-editor如何设置字体大小

    vue-quill-editor如何设置字体大小

    这篇文章主要介绍了vue-quill-editor如何设置字体大小,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04

最新评论