Vue传递参数不在URL路径上显示参数的完整方法

最新推荐文章于 2025-11-05 23:52:49 发布

原创最新推荐文章于 2025-11-05 23:52:49 发布 · 1.8w 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#params获取不到参数 #vue传递参数不在url显示参数 #传递隐藏参数

vue学习专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍在Vue中如何利用params进行页面间参数传递，避免参数直接暴露在路由中。从路由配置到发送数据，再到接收参数，提供了一套完整的解决方案。

首先，vue中传递参数可以直接使用

this.$router.push({path:'/taskCenter?id='+id});

但这样有一个明显的错误就是会把参数显示在路由中。

通过网上查阅资料发现可以使用 params 来传递参数当发现这有一个大坑。下面我来详细讲解如何使用 params

第一步：

在vue中路由中这样就是 src/router/index.js 路由中一定要书写成下面这种格式

export default new Router({
  routes: [

    //发送的页面
    {
      path:'/workTask',
      name:'workTask',
      component: WorkTask
    },
    
    //接收参数的页面  注意这个name
    {
      path:'/taskCenter',
      name:'taskCenter',
      component: TaskCenter
    }
  ]
})

第二步

在workTask页面中写发送数据

this.$router.push({name:'taskCenter', params:{id: ids, savePath: savePath}})

注意这个时候push中不在使用path，那是使用了你要发送个哪个页面的 name值。在这里我们需要发送个 taskCenter这个页面

第三步

在taskCenter这个页面中接收

mounted: function () {//可操作dom元素
    this.$nextTick(function () {
        //获取传递的参数
        this.requestIds=this.$route.params.id;
        this.requestXmlPath=this.$route.params.savePath;
    })
}

至此你就可以获取你想要的参数了