Why and how would you pass parameters to a Vue application?

You might have seen URLs that pass parameters to whatever front-end / back-end logic that is processing them. This will be something akin to -

https://myapp.com/accounts/1
https://myapp.com/accounts/1/todo/2
https://myapp.com/accounts?id=1
https://myapp.com/accounts?query=abc&role=my

id, query, role are parameters passed in the URL. The receiving function can have access to the parameters and values, and have processing logic based on values.

URL params are heavily used in some of the modern headless CMS applications (e.g. Strapi). You can pass a whole lot of stuff against URL and the server has out of the box support to respond to the values. Even in some of the older APIs will have support to referring to a specific resource with id.

So, where should and can you use Vue parameters?

• Application can display multiple accounts, but needs to filter account based on the value provided in URL (these are typically used to display specific account details on drilling down on a link for example)
• Enable filtering logic that is passed as context from another view. For example, filter accounts on state when drilling down from a chart showing sales numbers by states
• Pass an action to be done automatically. For example, assign a service request to user when user drills-down on a record in the list of unassigned service requests
• Navigate to or activate a component within the view. For example, show the Activity tab in the Account Detail view when drilling down from Activity page

How to pass params in the URL in Vue? Use dynamic route matching in router, and get your components ready to receive those parameters.

To pass id as a dynamic parameter, change path in router.js -

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

// ./router.js

import Vue from "vue";
import Router from "vue-router";

Vue.use(Router);

export default new Router({
    routes: [
    {
      path: "/account/:id",
      name: "account-with-id",
      component: () => import("./views/Account.vue"),
    },
    {
      path: "/account/:id/todo/:todoId",
      name: "account-with-id",
      component: () => import("./views/AccountTodo.vue"),

    },
});

The component can now do the following to receive the id -

1
2
3

<template>
  {{ $route.params.id }}
</template>

Or, receive multiple parameters-

1
2
3
4

<template>
  {{ $route.params }}
  <!-- { id: '1', todoId: '2' } -->
</template>

To catch params passed through ?, you just need to do access route query. This does not need a change to router.js.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

// ./router.js

import Vue from "vue";
import Router from "vue-router";

Vue.use(Router);

export default new Router({
    routes: [
    {
      path: "/account",
      name: "account",
      component: () => import("./views/Account.vue"),
    }
});

Receive parameters in component -

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

<template>
  {{ $route.query }}

  <!-- 
      '/accounts?id=1' transforms to -
        $route.query.id = 1

      '/accounts?query=abc&role=my' transforms to -
        $route.query.query = abc
        $route.query.role = my
   -->
</template>