Using VueJS to navigate to a specific route and pass parameters along with the

I'm a complete beginner when it comes to VueJS. Can someone please help me figure out how to access the deviceId in the Device component within vuejs? I've noticed that the deviceId in the h1 tag is not displaying on 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,
  },

]

Answer №2

One way to enhance the structure of your URL is by including a route parameter in the path definition:

{
  path: "/product/:productId",
  ...
}

This results in a more refined appearance for the URL displayed in the browser:

https://www.samplewebsite.com/product/Laptop

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for executing Cross-Origin-Requests from Firebase Hosting to an AWS Lambda function

Excuse me, I'm still new to web development. I have a basic single-page website hosted on Firebase hosting that retrieves some information from an AWS Lambda function (I didn't use Google Cloud because it didn't support outbound requests fo ...

Encountering an error when trying to insert a row in Laravel 5 with a foreign

While attempting to add a new record to the database in Laravel, an error was returned: "message": "SQLSTATE[23000]: Integrity constraint violation: 1048 Column 'usu_idrol' cannot be null (SQL: insert into usuarios (cedula, nombre, tele1, tele2, ...

When trying to implement a dark/light theme, CSS variables may not function properly on the body tag

Currently, I am in the process of developing two themes (light and dark) for my React website. I have defined color variables for each theme in the main CSS file as shown below: #light{ --color-bg: #4e4f50; --color-bg-variant: #746c70; --color-primary: #e2 ...

Vue SPA authentication

After following various guides on implementing authentication in my Vue application with a .NET Core API backend, I have some questions. You can check out this guide: https://medium.com/dev-bits/a-guide-for-adding-jwt-token-based-authentication-to-your-si ...

Navigating through Next.Js using client side redirects

I am working on creating a redirect based on whether the user has a token saved in cookies or not. Take a look at my code snippet below: const Secret = () => { const router = useRouter(); const [token] = useState({ token: cookies.get("token ...

Refresh a div using jQuery and include PHP files for dynamic content updating

This is the code I am using to dynamically update divs containing PHP files: $(document).ready(function() { setInterval(function() { $('#ContentLeft').load('live_stats1.php').fadeIn("slow"); $('#ContentRight').load( ...

The positioning problem arising from using a Vuetify select dropdown within a datatable

Vuetify datatable is being used with 20 columns, functioning properly. To view all the columns, horizontal scrolling is available. Filters are needed for each column in the header, achieved using v-slot:header. An issue arises when clicking on the select ...

Is it possible to implement a single OrbitControls with two cameras in ThreeJS?

Is there a way to link the OrbitControls of two canvases on the same page? For example, if the user zooms in on one canvas, I want the other canvas to also zoom in simultaneously. How could I achieve this synchronization between multiple canvases? ...

Can the selected week be highlighted along with the corresponding week number in a row?

Can we display the number of the week in a row along with the selected week, either in the toolbar or somewhere else? I attempted to utilize ToolbarComponent, but it overrides the entire header. However, I would like to keep it as is and just add informat ...

Exploring the process of cycling through "Fetch" JSON data in React.js for a dynamic slider component after setting it to state

Still getting the hang of React, so please go easy on me! My main objective is to retrieve data from my personal JSON server and display it on a custom "Slider" component that I'm working on. Following a tutorial, I wanted to challenge myself by usi ...

Update the configurable product process for the custom attribute 'delivery_time' in Magento 1.9.2

I am currently using Magento 1.9.2.4 (1.9.2.3 in my Testpage) and I have a few configurable products with multiple options. Each product (child of the configurable one) has a different delivery time. To achieve this, I created an attribute called "delivery ...

Checking for the existence of an object while passing variables in jade - a comprehensive guide

Leveraging the power of Jade, passing an object to the client can be achieved in this way: Route: res.render('mypage', { title: 'My Page', myobject : data }); Jade Template: extends layout block navbar include includes/navbar ...

I am encountering an issue with my dynamic Vue.js component layout not functioning properly when used with named slots

I am struggling with combining dynamically generated layouts and named slots. To define my layouts, I use the "component :is" method //app.vue <template> <component :is="layout"> <router-view /> </component> </t ...

Dynamic autocomplete feature with AJAX integration for filtering in Flask

Looking for some guidance on creating an HTML form with two input fields. Check out the HTML template code below: <form role="form" action="/cities/" method="get" autocomplete="on"> <label for="#input1"><strong>Country:</strong&g ...

Issue with Achieving Two-Way Binding in Angular 1.5 Component when using $ctrl

I am struggling with customizing some products using a component in my index.html. Ultimately, I need to calculate the total of selected products within the main controller "planosVoz" using two-way binding on the svaTotal property in the component control ...

Resolving issues with JavaScript caused by Polymer updates

I am a novice when it comes to working with Polymer. From what I have gathered, there seems to be compatibility issues with Mozilla and Safari. After researching on StackOverflow, I found that adding addEventListener('WebComponentsReady', funct ...

I'm looking to find the Angular version of "event.target.value" - can you help me out?

https://stackblitz.com/edit/angular-ivy-s2ujmr?file=src/app/pages/home/home.component.html I am currently working on getting the dropdown menu to function properly for filtering the flags displayed below it. My initial thought was to replicate the search ...

Looking for a discreet JavaScript-based text editor with advanced features?

Our CMS has been using the now-unsupported RichTextBox control for a while, and we want to find a lighter-weight alternative with better cross-browser support. Initially, we were considering different ASP.NET components, but I am starting to think that an ...

Error: JSONP Label Validation Failed

My JSON URL is: The above URL returns the following JSON: { token: "2cd3e37b-5d61-4070-96d5-3dfce0d0acd9%a00a5e34-b017-4899-8171-299781c48c72" } Edit: Changed it to {"token": "2cd3e37b-5d61-4070-96d5-3dfce0d0acd9%a00a5e34-b017-4899-8171-299781c48c72"} ...

The callback function for the `input` component in React Native must be a function and should not be undefined. Always remember to start component names with the proper syntax

There was a gap in my project as I have an application currently under development for testing purposes. Error: The view config getter callback for the component input must be a function (received undefined). Make sure to capitalize component names. I am ...