• Vue Router的params和query传参的使用和区别


    vue页面跳转有两种方式分别是:namepath

    this.$router.push({name: 'HelloWorld2})
    this.$router.push({path: '/hello-world1'})

    传参也有两种方式分别是:paramsquery

    this.$router.push({name: 'HelloWorld2', params:{id:1}})
    this.$router.push({path: '/hello-world2', query:{id:2}})

    下面放张图来展示路径和参数之间的关系

    结论: 

    使用name跳转可以用params和query传参

    当name和query对应的时候也可以跳转并传参,但是路由后面不能加参数名,否则页面会变空白

    使用path跳转只能用query传参

    如果使用path对应params则数据传输不过去

    使用query传参地址栏用?拼接起来的,类似于Ajax中的get请求

    {
    path: '/hello-world',
    name: 'HelloWorld2',
    component: HelloWorld2
    }

     这是使用query传参的地址栏显示:hello-world?id=2

    使用params传参的时候要在路由后面加参数名,(如果不加参数名也可以传递参数,但是页面一刷新参数就丢失了),并且传参的时候,参数名要跟路由后面设置的参数名对应。使用query方法,就没有这种限制,直接在跳转里面用就可以

    {
    path: '/hello-world/:id',
    name: 'HelloWorld2',
    component: HelloWorld2
    }

    这是使用params传参的地址栏显示:hello-world/2 

    讲了传参怎么接受参数呢? 

    params和query接受参数很类似

    this.$route.params.id,
    this.$route.query.id,

     这里注意使用的是route不是router!

    再来补充下使用

    <router-link>对应path和name怎么传参
    先来看index.js的写法

    {
    path: '/my-order/:state',
    name: 'my-order',
    component: MyOrder,
    }

    path传参:

    <router-link:to="{path: '/select-address/0'}"></router-link>
    看见了吧,直接在跳转的时候在地址栏拼接上对应的参数即可,

    name传参:

    <router-link :to="{name: 'my-order', params: {state: 0}"></router-link>
    使用name传参的时候就不能在地址栏进行拼接操作,需要写出对应的参数名

    接受参数跟上面的都一样

  • 相关阅读:
    【C语言篇】☞ 2. 常量、变量、scanf函数和printf 函数
    【C语言篇】☞ 1. 前言、基础
    React快速入门教程
    数论-欧拉函数
    数论-约数
    数论-质数专题
    匈牙利算法求二分图的最大匹配数
    染色法判断二分图
    Kruskal算法
    Prim算法
  • 原文地址:https://www.cnblogs.com/zouwangblog/p/10984200.html
Copyright © 2020-2023  润新知