vue页面params传值的坑及解决

 更新时间:2023年05月16日 23:28:51   作者:MG516  
这篇文章主要介绍了vue页面params传值的坑及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

vue页面params传值的坑

a.vue向b.vue传值

a.vue

this.$router.push({
    path: '/payType',
    query: {
        putUpList: this.putUpList,
        name:'111'
    },
    params:{
        cartList: this.cartList,
        totalMoney: this.totalMoney
    }
});

b.vue

mounted:function(){
    console.log(this.$route.params)
    console.log(this.$route.query)
}

坑来了~

query可以拿到,params拿不到

需要在注册路由的地方给路由加上name参数

const router = new VueRouter({
    routes:[{
        ...
    },{
        path:'/payType',
        name:'inputComp',
        component: payType
    }]
})

a.vue跳转路由的地方同样加上name参数,b.vue就可以拿到params了

this.$router.push({
    path: '/payType',
    name: 'inputComp',
    query: {
        putUpList: this.putUpList,
        name:'111'
    },
    params:{//一定要设置name,才可以传params
        cartList: this.cartList,
        totalMoney:this.totalMoney
    }
});

vue跨页面传值的精妙

众所周知,以前开发者只要掌握HTML、CSS、JavaScript 三驾马车就能胜任一份Web前端的工作。而在技术日新月异的现在,Vue, React,Angular在代替旧的前端框架已经是大势所趋了。

vue简介

Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

是一个兴起的前端js库,是一个精简的MVVM。从技术角度讲,Vue.js 专注于 MVVM 模型的 ViewModel 层。它通过双向数据绑定把 View 层和 Model 层连接了起来,通过对数据的操作就可以完成对页面视图的渲染。

与ajax比较

vue本身不支持ajax请求,需要借助vue-resource,axios插件。vue2官方推荐axios,是一个基于Promise的HTTP请求客户端,不再对vue-resource进行维护和更新。

axios([options])  
axios.get(url[,options]);

传参方式:

  1. 通过url传参
  2. 通过params选项传参
axios.post(url,data,[options]);

axios默认发送数据时,数据格式是Request Payload,并非我们常用的Form Data格式,所以参数必须要以键值对形式传递,不能以json形式传参

传参方式:

  1. 自己拼接为键值对
  2. 使用transformRequest,在请求发送前将请求数据进行转换
  3. 如果使用模块化开发,可以使用qs模块进行转换 

axios本身并不支持发送跨域的请求,没有提供相应的API,作者也暂没计划在axios添加支持发送跨域请求,所以只能使用第三方库

ajax传参格式

ajax是jquery封装的一个前端方法,通过请求后台API接口方式,用以局部刷新和动态展示页面。

$.ajax({
    url: "http://localhost:8082/boot/request/parameter",
    type: "post",
    contentType: "application/json;charset=utf-8",
    data: JSON.stringify({name: "aaa", foo: ["bar1", "bar2"]}),
    success: function (json) {
        console.log(json);
    }
});

vue传参格式

场景:点击父页面的XX查询按钮,弹出子页面queryView,父页面选中的某行记录值传到子页面中,子页面请求后台Api关联查询并展示父页面选中记录对应的明细记录。

  • 在父页面定义方法query()
  • const rows为父页面查询列表选中的某行记录
  • queryView为子页面
  • params 为定义的传值对象
  • callback 回调方法
query() {
      let title = "XX查询"
      const rows = this.$refs.multipleTable.selection;
      this.$dialog.modal(queryView, {
        title: title,
        width: 1200,
        height: 600,
        params: {domain: Object.assign({}, rows[0])},
        callback: data=> {
          if(data.flag == true)
            this.queryData()
        }
      });
    }

子页面中定义接收参数对象,接收参数对象有3种格式:变量、对象、常量

这里定义为对象 Object

props:{
    domain: {
      type: Object,
      default: function() {}
    }
  }

调用后台api接口关联查询并展示

  • params 定义方法中变量,获取从父页面接收的对象中的属性值
  • this.operat4Data(XXApi.getList, params, null, null); 调用后台api接口及传参
queryData() {
      let params = {apiParams:this.domain.apiParams};
      let respData =  this.operat4Data(XXApi.getList, params, null, null);
      respData.then( data => {
        this.dataList = data.posts;
        this.total = data.count;
      });
    }

vue的优势

vue因其极具方便灵活易用等特性,为广大前端开发者所推崇和使用。

总结

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

相关文章

  • vue+Element实现搜索关键字高亮功能

    vue+Element实现搜索关键字高亮功能

    这篇文章主要为大家详细介绍了vue+Element实现搜索关键字高亮功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-05-05
  • Vue中key的作用和Diff算法原理举例深度解析

    Vue中key的作用和Diff算法原理举例深度解析

    Vue中使用key至关重要,因为它可标识列表项,以进行准确的更新,优化diff算法,以高效检测更改,缓存子组件,以提高性能,这篇文章主要介绍了Vue中key的作用和Diff算法原理的相关资料,需要的朋友可以参考下
    2026-03-03
  • vue组件与复用详解

    vue组件与复用详解

    组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。这篇文章主要介绍了vue组件与复用,需要的朋友可以参考下
    2018-04-04
  • Elementui表格组件+sortablejs实现行拖拽排序的示例代码

    Elementui表格组件+sortablejs实现行拖拽排序的示例代码

    这篇文章主要介绍了Elementui表格组件+sortablejs实现行拖拽排序,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • vue axios数据请求get、post方法及实例详解

    vue axios数据请求get、post方法及实例详解

    axios是一个基于Promise,同时支持浏览器端和Node.js的HTTP库,常用于Ajax请求。这篇文章主要介绍了vue axios数据请求get、post方法的使用 ,需要的朋友可以参考下
    2018-09-09
  • Vue数据双向绑定的深入探究

    Vue数据双向绑定的深入探究

    这篇文章主要给大家介绍了关于Vue数据双向绑定的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2018-11-11
  • Vue侦听器:watch与watchEffect的区别与使用

    Vue侦听器:watch与watchEffect的区别与使用

    watch 和 watchEffect 都是 Vue 中用于侦听响应式数据变化的工具,但它们的依赖追踪方式、执行时机和使用场景有显著区别, 下面就来详细的介绍一下,感兴趣的可以了解一下
    2026-02-02
  • axios封装,使用拦截器统一处理接口,超详细的教程(推荐)

    axios封装,使用拦截器统一处理接口,超详细的教程(推荐)

    这篇文章主要介绍了axios封装使用拦截器处理接口,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • Vue.js实现对视频预览的示例代码

    Vue.js实现对视频预览的示例代码

    本文主要介绍了Vue.js实现对视频预览的示例代码,通过监听文件选择事件和使用FileReader API,可以实现视频文件的预览功能,感兴趣的可以了解一下
    2025-01-01
  • vue项目使用cdn加速减少webpack打包体积

    vue项目使用cdn加速减少webpack打包体积

    通过压缩代码的手段可减小网络传输的大小,但实际上最影响用户体验的还是网页首次打开时的加载等待,其根本原因是网络传输过程耗时较大,这篇文章主要给大家介绍了关于vue项目使用cdn加速减少webpack打包体积的相关资料,需要的朋友可以参考下
    2022-08-08

最新评论