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

首先，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;
    })
}

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