vue项目实例中用query传参如何实现跳转效果

目录

• 用query传参实现跳转效果
• 传值页面
• 接收参数页面
• vue使用query传参，解决跳转回退无参数渲染页面，无内容的方法（不需使用缓存的技术）
• 简说params和query的区别

用query传参实现跳转效果

vue中已element-ui为例，写带参跳转很方便

                新建案件+
                
                
                
                  
                
                
                  
                
                
                  
                
                
                  
                
                
                  
                
                
                  
                
                
                  
                
              

用后台接口取到数据渲染到页面，element-ui很方便配合它自己封装的handleJump(scope.$index, scope.row)，就可以很轻松的找到你想要的值和精准的操作每一行。

这里我是已传对象的形式进行传值的，到跳转页面取值会比较方便，以免到跳转页面还需要截取自己所需的值，比较麻烦。

其中的path是需要传值的目的地，就是要将值传到此页面，此路径在

 

query就是你所要传递的对象。

接下来就是去目的地页面接收所传过去的参数

这里我只需要用传过去的ID去查找和跳转对应的页面，name属性去显示在当前页面上，所以用对象传值很方便，需要哪一个取哪一个即可。

 这里就只取了传过来的ID，将id赋值给所需对象传参跳转相应页面即可。

而刚刚所说的name属性就被我用来显示，拿出来直接用就行

这样就完成了传值和动态显示，下面上完整代码，是自己所写的真实项目，写的有点垃圾大家只看query传参的部分就行。

传值页面

接收参数页面

vue使用query传参，解决跳转回退无参数渲染页面，无内容的方法（不需使用缓存的技术）

      this.$router.push({
        name: "goodsDetail",
        query: {
          id: id,
          goods_type:goods_type
        }
      });

 mounted(){
      this.proId = this.$route.query.id;//商品id
      this.goods_type = this.$route.query.goods_type;//商品类型
}

简说params和query的区别

params对象会在回退后消失，但是query会绑在路由后，有路可退

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