vue+element-路由传递参数

淡淡的烟草味﹌ 2022-03-01 05:52 434阅读 0赞

**业务场景：**

我在做一个酒店自助机业务的时候出现这样一个情况，首先是客人入住，那么这个时候客人入住的时候需要选择是有没有预定过，如果有预定的话，那么就直接刷身份证或者输入订单号，就可以查出来预定的信息，那么客人续住的时候也是直接刷身份证，拿到在住信息，客人退房的时候，也同样是刷身份证进行退房的操作，那么这个时候出现了一个比较恶心的情况，就是这三种操作都是需要刷身份证的页面的，也就是这个页面：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9jbGVhcmxvdmUuYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70][]

所以我们在进入这个页面的时候首先要做的是判断出来客人目前是进行的什么操作，因为毕竟是用一个页面，但是如果不想折腾的话，直接做三个一模一样的页面，就没有这个问题了，但是我们写代码的不能做那么傻\*的操作，所以我们就需要在这个页面进来的时候拿到一个来源码，也就是我要知道他是从入住、续住、退房这三个操作中哪一个进来的，这个时候我们就需要在路由那里给每一个操作加一个flag。

两种方法：

\------------------------**存值**\---------------------------

**params传递和query传递**

*params传递*

看代码：

<router-link :to = "{name:'/cin-id-card',params:{flag:'ext'}}">
                    <img src="@/common/imgs/xuzhu.png" alt="">
     </router-link>

** 这个时候有一个需要注意的点，就是这个时候我们的router.js中的这个cin-id-card是需要定义name的**，看代码：

const router = new VueRouter({
      routes:[
        {
          path:"/cin-id-card",
          component:Card,
          name:"/cin-id-card",
        },
      ],

*query传递*

看代码：

<router-link :to = "{path:'/cin-id-card',query:{flag:'ext'}}">
                    <img src="@/common/imgs/xuzhu.png" alt="">
     </router-link>

这个时候我们在router.js里面也是需要有对应的path的。不重复写了，看上面。

PS：

1、这里需要注意的是：name是和params对应的，query是和path对应的。

2、我们使用query的时候，我们传递的参数会在页面上面的url中显示，也就是比较不安全，params是不显示的！

\----------------------**取值**\-----------------------

下面我们说怎么拿到这个值：

在路由对应的页面上面执行下面的代码

*params*(data里面声明一个flag接收值)

that.flag = that.$route['params']['flag'];

*query*

that.flag = that.$route['query']['flag'];

写到这里基本就结束了，我们只需要在写路由的时候稍微用点心就可以的，喜欢我的文章的可以关注一下。

上面的name一般是不加/的，这个我这里加上了，你们写的时候尽量不加，养成好习惯。

谢谢大佬们阅读！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9jbGVhcmxvdmUuYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70]: /images/20220301/8a0a2e8347684586bd4f963bc6a42123.png