zoukankan      html  css  js  c++  java
  • vue param和query两种传参方式

    1、传参方式

      query传参方式

    this.$router.push({
       path: "/home",
       query: {code:"123"}
    })    

      

      param传参方式

    this.$router.puth({
       name: "/home",
       param: {code: "123"}  
    })
    // 字符串
    <router-link to="apple"> to apple</router-link>
    // 对象
    <router-link :to="{path:'apple'}"> to apple</router-link>
    // 命名路由
    <router-link :to="{name: 'applename'}"> to apple</router-link>
    //直接路由带查询参数query,地址栏变成 /apple?color=red
    <router-link :to="{path: 'apple', query: {color: 'red' }}"> to apple</router-link>
    // 命名路由带查询参数query,地址栏变成/apple?color=red
    <router-link :to="{name: 'applename', query: {color: 'red' }}"> to apple</router-link>
    //直接路由带路由参数params,params 不生效,如果提供了 path,params 会被忽略
    <router-link :to="{path: 'apple', params: { color: 'red' }}"> to apple</router-link>
    // 命名路由带路由参数params,地址栏是/apple/red
    <router-link :to="{name: 'applename', params: { color: 'red' }}"> to apple</router-link>

    2、取值

      获取query传参的方式

    this.$route.query.code //123

      获取param 传参的方式

    this.$route.param.code //123

    3、浏览器的路由展示情况

      使用query传参的方式类似于get交互,传的参数在路由中显示,可以用作刷新后仍然存在参数。

      使用param传参的方式类似于post交互,穿的参数不会出现在路由中,界面刷新后传参就不存在。

    注意要点:query与param两种传参方式功能一直,都是传参,方式不一样,最大区别是传的参数是否能在路由中显示,能否刷新后仍然传参

  • 相关阅读:
    【转】java的string中,关于split空串总会返回单个元素的数组
    【转】Java实现将文件或者文件夹压缩成zip
    单例模式
    数据库隔离级别
    ckeditor+ckfinder
    extremecomponents
    在linux环境下重启oracle数据库,解决密码过期的问题
    20180918 begin
    hadoop免登录
    CentOS环境下通过YUM安装软件,搭建lnmp环境
  • 原文地址:https://www.cnblogs.com/aidixie/p/11082236.html
Copyright © 2011-2022 走看看