在Vue中编程式传参和不传参方式，新页面接收方式

最新推荐文章于 2024-09-25 06:14:45 发布

午夜玫瑰钻

最新推荐文章于 2024-09-25 06:14:45 发布

阅读量641

点赞数

CC 4.0 BY-SA版权

分类专栏： vue学习之路文章标签： vue.js elementui javascript

本文链接：https://blog.youkuaiyun.com/gujinapenggu5/article/details/86239919

vue学习之路专栏收录该内容

18 篇文章

订阅专栏

本文介绍了在Vue.js应用中如何进行编程式跳转，并详细讲解了query和params两种参数传递方式。query参数会显示在URL地址栏，而params参数则不会。对于query参数，新页面可以通过直接访问URL获取；而对于params参数，需要通过路由的name属性指定页面并接收。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
    <div style="margin-top:10px">
        <el-button>编程式路由跳转下方</el-button><br><br> 
        <el-button @click="handleNoCanShu">不带参数跳转</el-button>
        <el-button @click="handleYesCanShu" type="success">携带参数跳转</el-button>
    </div>
</template>

路由配置信息

routes:[
    {
      path:'/hrefnewPage',
      name:'hrefnewPage',
      component: HrefNewPage,
    },
]

跳转的方法

// 带参数跳转
// query传参地址栏看的出来信息
// params传参地址栏看不出来信息

第一种传参方式 query传参

methods: {
    handleNoCanShu(){   //直接跳转----不带参数
      this.$router.push('/hrefnewPage');
    },
    handleYesCanShu(){  
      this.$router.push({path:'/hrefnewPage',query:{setid:this.projectId}}); 
    },
}

第一种接收方式新页面

created() {
  this.getParams();
},
watch: {
  $route: "getparams",
},
methods: {
   getParams() {
      this.receive = this.$route.query.setid   // 第一种接收形式 
   },
},

第二种传传参的方式 params传参

methods: {
    handleNoCanShu(){   //直接跳转----不带参数
      this.$router.push('/hrefnewPage');
    },
    handleYesCanShu(){  
      this.$router.push({name:'hrefnewPage',params:{setid:this.projectId}}); 
    },
}

第二种接收方式新页面

created() {
  this.getParams();
},
watch: {
  $route: "getparams",
},
methods: {
   getParams() {
      this.receive = this.$route.params.setid   // 第二种接收形式
   },
},

解释说明：

传递参数的方法：

1.Params

由于动态路由也是传递params的，所以在 this.$router.push() 方法中 path不能和params一起使用，否则params将无效。需要用name来指定页面。

及通过路由配置的name属性访问