Is there a way to pass locale data using props in VueJS Router?

Question

Is there a way to pass locale data using props in VueJS Router?

To access hotel data, the URL path should be localhost:8080/hotel/:id (where id is equal to json.hoteID).

For example, localhost:8080/hotel/101

This path should display the specific data for that hotel.

In order to achieve this, we will utilize VueJS vue-router.

import json from "@/assets/data/Hotels.json";
data() {
    return {
      data: json,
    };
  },

javascript html css vue.js vue-router

Answer 1

Answer №1

To retrieve the hotelID, you can access it through $route.params. Refer to the documentation for more details. Once you have the ID, you can find the corresponding hotel data in Hotels.json using $route.params.id. Check out the Demo

Hotels.json

{
  "hotels": [
    {
      "id": 1,
      "name": "hotel 1"
    },
    {
      "id": 2,
      "name": "hotel 2"
    },
    {
      "id": 3,
      "name": "hotel 3"
    }
  ]
}

router.js

const routes = [
  {
    path: "/",
    name: "hotels",
    component: function () {
      return import("@/components/Hotels.vue");
    }
  },
  {
    path: "/hotel/:id",
    name: "hotel",
    component: function () {
      return import("@/views/Hotel.vue");
    }
  }
];

App.vue

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Hotels</router-link>|
      <template v-for="(item, key) in hotels">
        <router-link :key="key" :to="`/hotel/${hotels[key].id}`">{{
          hotels[key].name
        }}</router-link
        >|
      </template>
    </div>
    <router-view />
  </div>
</template>

<script>
import json from "./Hotels.json";
export default {
  name: "App",
  data() {
    return {
      hotels: json.hotels,
    };
  },
};
</script>

Hotel.vue

 <template>
   <div>
     <h1>{{ hotel.name }}</h1>
   </div>
 </template>

    <script>
    import json from "../Hotels.json";
    export default {
      data() {
        return {
          hotels: json.hotels,
        };
      },
      computed: {
        hotel() { 
          return this.hotels.find((item) => item.id === +this.$route.params.id);
        },
      },
    };
    </script>

Answer 2

To retrieve the hotelID, you can access it through $route.params. Refer to the documentation for more details. Once you have the ID, you can find the corresponding hotel data in Hotels.json using $route.params.id. Check out the Demo

Hotels.json

{
  "hotels": [
    {
      "id": 1,
      "name": "hotel 1"
    },
    {
      "id": 2,
      "name": "hotel 2"
    },
    {
      "id": 3,
      "name": "hotel 3"
    }
  ]
}

router.js

const routes = [
  {
    path: "/",
    name: "hotels",
    component: function () {
      return import("@/components/Hotels.vue");
    }
  },
  {
    path: "/hotel/:id",
    name: "hotel",
    component: function () {
      return import("@/views/Hotel.vue");
    }
  }
];

App.vue

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Hotels</router-link>|
      <template v-for="(item, key) in hotels">
        <router-link :key="key" :to="`/hotel/${hotels[key].id}`">{{
          hotels[key].name
        }}</router-link
        >|
      </template>
    </div>
    <router-view />
  </div>
</template>

<script>
import json from "./Hotels.json";
export default {
  name: "App",
  data() {
    return {
      hotels: json.hotels,
    };
  },
};
</script>

Hotel.vue

 <template>
   <div>
     <h1>{{ hotel.name }}</h1>
   </div>
 </template>

    <script>
    import json from "../Hotels.json";
    export default {
      data() {
        return {
          hotels: json.hotels,
        };
      },
      computed: {
        hotel() { 
          return this.hotels.find((item) => item.id === +this.$route.params.id);
        },
      },
    };
    </script>

Answer 3

Answer №2

Using the Vue.js framework, this code navigates to a specific route by pushing a new object into $route with the parameter id set to hotelID from data.

Answer 4

Using the Vue.js framework, this code navigates to a specific route by pushing a new object into $route with the parameter id set to hotelID from data.

Is there a way to pass locale data using props in VueJS Router?

Answer №1

Answer №2

Similar questions

What is the process of using AJAX, JavaScript, and HTML to submit data to a remote

Angular 6 TypeScript allows for efficient comparison and updating of keys within arrays of objects. By leveraging this feature

Customize.Print - establish default print preferences

What is the best way to eliminate mouse click release events?

Ensuring even distribution of three divs within a container

What is the best way to iterate through a collection of two or more arrays in order to determine the total length of all

Ensuring IconButton is perfectly aligned with Text in one straight line

Leveraging PHP variables to determine the image location, implement an onclick function to cycle through the image gallery

Unable to utilize a computed property within the data section

Error: The property 'slice' cannot be read from an undefined value

What is the best way to create a case-insensitive search feature in Node.js?

Generating observables from form submission event

How can I dynamically update the sidebar in Ionic 3 post-login without the need to reload the app or refresh the browser?

Unspecified data transfer between child and parent components

Tips for extracting information from a website with Selenium using Python

Grasping the idea of elevating state in React

How to Perfectly Center a Div using CSS in Next.js (slightly off-center)

Using both Promise based architecture and events in Node.js can lead to unexpected behavior and should be avoided

Having trouble establishing a web socket connection using JavaScript

Struggling to achieve desired output from function in NextJS