CODEWITHSUNDEEP
javascriptvue.jsparameterscomponents
Daryl Wong
Daryl Wong

Reputation: 2443

VueJS push a route with params data

I am very new to VueJS. How can I get the deviceId in Device component in vuejs. The deviceId in h1 tag was not printed out in the Device component page.

    goForward() {
      console.log("go forward");
      this.$router.push({ name: "Device", params: { deviceId: "Air-conditioning" } });
    },

<template>
  <div class="about">
   <h1>This is the device page {{ deviceId }}</h1>
  </div>
</template>

<script>
  export default {
   name: "Device",
   props: ["deviceId"],

 data() {
   return {};
  },
};
 </script>

const routes = [
  {
    path: '/device',
    name: 'Device',
    component: Device,
  },

]

Upvotes: 1

Views: 415

Answers (2)

Andrey
Andrey

Reputation: 1

It's also worth noting that you can improve the URL scheme a bit by adding a route parameter like so:

{
  path: "/device/:deviceId",
  ...
}

Thus, the URL in the address bar will look cleaner:

https://www.example.com/device/Air-conditioning

Upvotes: 0

Pierre Said
Pierre Said

Reputation: 3830

In order to receive your params as props you need to add the props: true option in the route object.

const routes = [
  {
    path: "/device",
    name: "Device",
    component: 'Device',
    props: true
  }
];

https://router.vuejs.org/guide/essentials/passing-props.html#boolean-mode

Upvotes: 2

Related Questions