# Redirecting from one page to another while passing variables?

**URL:** https://discourse.nodered.org/t/redirecting-from-one-page-to-another-while-passing-variables/86535
**Category:** Dashboard
**Tags:** dashboard-2
**Created:** [18 March 2024 20:33 UTC](https://discourse.nodered.org/t/redirecting-from-one-page-to-another-while-passing-variables/86535 "2024-03-18T20:33:08Z")
**Posts on this page:** 15
**Page:** 1

<div class="post-metadata">

### Author: ![network\_potato](https://avatars.discourse-cdn.com/v4/letter/n/59ef9b/32.png) [@network\_potato](https://discourse.nodered.org/u/network_potato)
#### Post date: [18 March 2024 20:33 UTC](https://discourse.nodered.org/t/redirecting-from-one-page-to-another-while-passing-variables/86535/1 "2024-03-18T20:33:08Z")

</div>

I have a page, let's call it `/invoices`.

On that page, I have a data table that contains a list of invoices related to a specific customer (the table loads all invoices using a customer number stored in a global context variable). The first column contains the invoice number. When I click on the invoice number, I want another page on the dashboard to load (let's call it `/invoice-actions`), while passing the invoice number so that I can use it further on that page/flow.

I already know how to create the `<a>` tag in the cell containing the invoice number, to make the cell clickable and creating the link to the other page. But how do I pass on the value of the cell (= the invoice number) when redirecting the user to the other page?

---

<div class="post-metadata">

### Author: ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)
#### Post date: [19 March 2024 08:42 UTC](https://discourse.nodered.org/t/redirecting-from-one-page-to-another-while-passing-variables/86535/2 "2024-03-19T08:42:29Z")

</div>

My answer was going to be to add `?query=value` to the end of the URL, and then access it via `this.$route.query` in your target page, however... the router is removing the query on the arrival destination for some reason, and I'm not entirely sure why.

---

<div class="post-metadata">

### Author: ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)
#### Post date: [19 March 2024 08:49 UTC](https://discourse.nodered.org/t/redirecting-from-one-page-to-another-while-passing-variables/86535/3 "2024-03-19T08:49:08Z")

</div>

A working solution is actually to use Vue's `<router-link>` instead, not sure why the raw `<a>` doesn't work:

```html
<template>
    <router-link :to="{path: '/path/to/page', query: {hello: 'world'}}">Test Link with Router Link (with path)</router-link>
    <router-link :to="{name: 'Page:<Page Name>', query: {hello: 'world'}}">Test Link with Router Link (by name)</router-link>
</template>

```

I tested this by then adding a `ui-template` on the destination page with:

```html
<template>
    <div>
        Query Param "hello" = {{ queryParam }}
    </div>
</template>

<script>
    export default {
        data() {
            // define variables available component-wide
            // (in <template> and component functions)
            return {
                queryParam: null
            }
        },
        mounted() {
            // code here when the component is first loaded
            this.queryParam = this.$route.query?.hello
        }
    }
</script>

```

---

<div class="post-metadata">

### Author: ![network\_potato](https://avatars.discourse-cdn.com/v4/letter/n/59ef9b/32.png) [@network\_potato](https://discourse.nodered.org/u/network_potato)
#### Post date: [19 March 2024 09:03 UTC](https://discourse.nodered.org/t/redirecting-from-one-page-to-another-while-passing-variables/86535/4 "2024-03-19T09:03:53Z")

</div>

Thank you, that worked!

But instead of sending the string `'world'`, how do I send either a `msg` or `item`?

Tried referencing them using double brackets, but that didn't work. The URL just contains the brackets and the variable name.

EDIT: Dropped the single quotes, and it works. Thank you.

---

<div class="post-metadata">

### Author: ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)
#### Post date: [19 March 2024 09:07 UTC](https://discourse.nodered.org/t/redirecting-from-one-page-to-another-while-passing-variables/86535/5 "2024-03-19T09:07:44Z")

</div>

You mentioned you'd want to send the invoice number, so:

```auto
<router-link :to="{name: 'Page:<Page Name>', query: {invoiceNumber: item.invoiceNumber}}">Test Link with Router Link (by name)</router-link>

```

Assuming the `item` was the row of data within the `<template>` of the `v-data-table`

No need for any double brackets here, as we've told Vue that the `to` is a dynamic variable with `:` in it, so it treats the contents as JavaScript.

---

<div class="post-metadata">

### Author: ![network\_potato](https://avatars.discourse-cdn.com/v4/letter/n/59ef9b/32.png) [@network\_potato](https://discourse.nodered.org/u/network_potato)
#### Post date: [19 March 2024 09:10 UTC](https://discourse.nodered.org/t/redirecting-from-one-page-to-another-while-passing-variables/86535/6 "2024-03-19T09:10:33Z")

</div>

What if I want to store `invoiceNumber` in `msg.invoiceNumber` as well as display it in the `div`?

---

<div class="post-metadata">

### Author: ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)
#### Post date: [19 March 2024 09:12 UTC](https://discourse.nodered.org/t/redirecting-from-one-page-to-another-while-passing-variables/86535/7 "2024-03-19T09:12:34Z")

</div>

Not sure I understand the context of `msg` here? You've navigated from Page 1 \> Page 2. No Node-RED messages are passed between them in order to make this happen?

Where are you receiving or sending `msg`?

---

<div class="post-metadata">

### Author: ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)
#### Post date: [19 March 2024 09:14 UTC](https://discourse.nodered.org/t/redirecting-from-one-page-to-another-while-passing-variables/86535/8 "2024-03-19T09:14:35Z")

</div>

If you mean on the arrival page, ithe whole component can access the query parameter with `this.$route.query.invoiceNumber` as mentioned above.

You can do whatever you like with it then, rendering in a div:

```auto
<div>{{ $route.query.invoiceNumber }}</div>

```

or sending it on with a button click:

```auto
<v-btn @click="send({payload: $route.query.invoiceNumber})">Send Invoice Number</v-btn>

```

---

<div class="post-metadata">

### Author: ![network\_potato](https://avatars.discourse-cdn.com/v4/letter/n/59ef9b/32.png) [@network\_potato](https://discourse.nodered.org/u/network_potato)
#### Post date: [19 March 2024 09:23 UTC](https://discourse.nodered.org/t/redirecting-from-one-page-to-another-while-passing-variables/86535/9 "2024-03-19T09:23:33Z")

</div>

Let's say for example, after the user is redirected to the other page, I want to do an API call using a http request node, with the invoice number in the URL `https://example.com/api/invoices/{{invoiceNumber}}`.

To get some more information about the invoice before displying it in the template node.

How do I reference the invoice number? And how can I take a look at it in a debug node for example?

---

<div class="post-metadata">

### Author: ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)
#### Post date: [19 March 2024 13:10 UTC](https://discourse.nodered.org/t/redirecting-from-one-page-to-another-while-passing-variables/86535/10 "2024-03-19T13:10:47Z")

</div>

I'd be making an API call (using something like [fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)) from within the `ui-template` node.

If you have your API hosted in Node-RED using the `http-in`/`http-out` nodes, then your API call within the Vue client could handle everything, e.g.

```json
[
    {
        "id": "3ae1fe5fec1d4b4f",
        "type": "http in",
        "z": "9c18a4bf6ab4e5c1",
        "name": "",
        "url": "/invoices/:invoiceNumber",
        "method": "get",
        "upload": false,
        "swaggerDoc": "",
        "x": 820,
        "y": 240,
        "wires": [
            [
                "f9438d85d70dd835"
            ]
        ]
    },
    {
        "id": "05d3b69b57dac523",
        "type": "http response",
        "z": "9c18a4bf6ab4e5c1",
        "name": "",
        "statusCode": "",
        "headers": {},
        "x": 1250,
        "y": 240,
        "wires": []
    },
    {
        "id": "f9438d85d70dd835",
        "type": "change",
        "z": "9c18a4bf6ab4e5c1",
        "name": "",
        "rules": [
            {
                "t": "set",
                "p": "payload",
                "pt": "msg",
                "to": "req.params.invoiceNumber",
                "tot": "msg"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 1080,
        "y": 240,
        "wires": [
            [
                "05d3b69b57dac523",
                "84d7120f9493ce46"
            ]
        ]
    },
    {
        "id": "d6066823247f012e",
        "type": "ui-template",
        "z": "9c18a4bf6ab4e5c1",
        "group": "41970c5cd2a6cef0",
        "page": "",
        "ui": "",
        "name": "",
        "order": 0,
        "width": 0,
        "height": 0,
        "head": "",
        "format": "<template>\n <v-btn @click=\"loadInvoice(123)\">Make API Call</v-btn>\n <pre>{{ invoice }}</pre>\n</template>\n\n<script>\n export default {\n data() {\n // define variables available component-wide\n // (in <template> and component functions)\n return {\n invoice: null\n }\n },\n mounted() {\n // code here when the component is first loaded\n this.queryParam = this.$route.query?.hello\n },\n methods: {\n loadInvoice: async function (invoiceNumber) {\n const response = await fetch('/node-red/invoices/' + invoiceNumber)\n this.invoice = await response.json()\n }\n }\n }\n</script>",
        "storeOutMessages": true,
        "passthru": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 900,
        "y": 280,
        "wires": [
            []
        ]
    },
    {
        "id": "84d7120f9493ce46",
        "type": "debug",
        "z": "9c18a4bf6ab4e5c1",
        "name": "debug 378",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "true",
        "targetType": "full",
        "statusVal": "",
        "statusType": "auto",
        "x": 1270,
        "y": 280,
        "wires": []
    },
    {
        "id": "41970c5cd2a6cef0",
        "type": "ui-group",
        "name": "API Call Example",
        "page": "bbc7b44a426b2b01",
        "width": "6",
        "height": "1",
        "order": -1,
        "showTitle": true,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "bbc7b44a426b2b01",
        "type": "ui-page",
        "name": "Debugging Problems",
        "ui": "c2e1aa56f50f03bd",
        "path": "/problems",
        "icon": "bug",
        "layout": "notebook",
        "theme": "129e99574def90a3",
        "order": 12,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "c2e1aa56f50f03bd",
        "type": "ui-base",
        "name": "Dashboard",
        "path": "/dashboard",
        "showPathInSidebar": false,
        "navigationStyle": "default"
    },
    {
        "id": "129e99574def90a3",
        "type": "ui-theme",
        "name": "Another Theme",
        "colors": {
            "surface": "#000000",
            "primary": "#0094ce",
            "bgPage": "#f0f0f0",
            "groupBg": "#ffffff",
            "groupOutline": "#d9d9d9"
        },
        "sizes": {
            "pagePadding": "6px",
            "groupGap": "6px",
            "groupBorderRadius": "9px",
            "widgetGap": "12px"
        }
    }
]

```

---

<div class="post-metadata">

### Author: ![network\_potato](https://avatars.discourse-cdn.com/v4/letter/n/59ef9b/32.png) [@network\_potato](https://discourse.nodered.org/u/network_potato)
#### Post date: [19 March 2024 13:25 UTC](https://discourse.nodered.org/t/redirecting-from-one-page-to-another-while-passing-variables/86535/11 "2024-03-19T13:25:06Z")

</div>

Hmm I see, so there is no way to store the number in `msg.something`?

---

<div class="post-metadata">

### Author: ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)
#### Post date: [19 March 2024 13:58 UTC](https://discourse.nodered.org/t/redirecting-from-one-page-to-another-while-passing-variables/86535/12 "2024-03-19T13:58:52Z")

</div>

If that's a necessity, then you could emit a `msg` from the `ui-template` using the `send()` function? [Docs](https://dashboard.flowfuse.com/nodes/widgets/ui-template.html#sending-messages-to-node-red)

But given what you've explained you're trying to build, not entirely sure it's necessary?

---

<div class="post-metadata">

### Author: ![network\_potato](https://avatars.discourse-cdn.com/v4/letter/n/59ef9b/32.png) [@network\_potato](https://discourse.nodered.org/u/network_potato)
#### Post date: [19 March 2024 14:25 UTC](https://discourse.nodered.org/t/redirecting-from-one-page-to-another-while-passing-variables/86535/13 "2024-03-19T14:25:11Z")

</div>

Is there any way to send the data without needing user interaction? Like part of the `mounted()` code?

---

<div class="post-metadata">

### Author: ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)
#### Post date: [19 March 2024 14:42 UTC](https://discourse.nodered.org/t/redirecting-from-one-page-to-another-while-passing-variables/86535/14 "2024-03-19T14:42:23Z")

</div>

yes - just call the `send()` function inside the `mounted () { ... }`

---

<div class="post-metadata">

### Author: ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)
#### Post date: [2 April 2024 14:43 UTC](https://discourse.nodered.org/t/redirecting-from-one-page-to-another-while-passing-variables/86535/15 "2024-04-02T14:43:12Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.