Sending data to <nuxt-link> component without using parameters or passing hidden information to the router without using parameters

Presently, I am utilizing nuxt and vue routing for my web application.

In my view, I'm creating my link in the following manner: 

<nuxt-link :to="'/article/' + article.id">

Afterwards, I extract this article ID on my article page by retrieving the parameter from the URL to make my API request: ${params.id}

While this method works well, the URL structure ends up like article/1. However, I would like to transition to user-friendly URLs such as article/this-is-my-article while still being able to pass the article id.

Is there a way to pass this ID to nuxt-link through a prop or is there an alternative method to transmit this ID 'invisibly' so it can be used for my API call?

javascriptvue.jsnuxt.js

Answer №1

If you prefer using the $router with params over nuxt-link, here is a suggestion. Check out this example:

<div@click="$router.push({name:'[goal name]', params:{[params]}})" >View All History</div>

Here's another example:

<div @click="$router.push({name:'view_tables-display_reports', params:{id:'pie'}})" >View All History</div>

Answer №2

My recommendation is to replace the id with a new field called slug in your table that has unique values. By using this as an identifier, it will make the system more user-friendly.

Answer №3

Using <Nuxt-Link> to Connect a Named Route with Parameters

This method ensures that parameters are not visible in the URL. Depending on your router configuration, these parameters will be passed as props to the component loaded for the route. For example, a route parameter like id will be passed into a component prop also named id.

<nuxt-link :to="{ name: 'MyArticleRoute', params: { id: id } }">
 View Article
</nuxt-link>

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

Angular-Breeze Navigation Strategy Template

Within my Angular site, there is a page that allows users to run reports based on various criteria such as employee ID, event ID, from date, to date, and more. Once the user selects the parameters for their report and clicks submit, they are shown search r ...

javascriptangularjsdesign-patternsbreeze

Angularjs Dependency Module Aggregation

Just diving into angularjs, I have a question. Can I include multiple dependency modules in AngularJS? sample code: angular.module('myApp', ['dependency1','dependency2']); I attempted this approach as well without success ...

javascriptangularjs

Angular 1.5.0 - What is the reason for factory being invoked only once?

I am facing an issue with my html template where the data from an Angular factory is only loaded once when the page initially loads. Subsequent page openings show the same results from the first backend call, indicating a potential caching issue within the ...

javascriptangularjs

Floating Action Button is not properly attached to its parent container

When developing my React Js app, I decided to utilize the impressive libraries of Material UI v4. One particular component I customized is a Floating Action Button (FAB). The FAB component, illustrated as the red box in the image below, needs to remain p ...

javascriptcssreactjsmaterial-ui

Using an external npm module in TypeScript can result in the tsc output directory being modified

In my TypeScript project, I have set up the build process to generate JavaScript files in the ./src/ directory. Everything works smoothly when building against existing npm modules, such as Angular 2 imports. However, I encountered a strange issue when I ...

javascriptangularjsnode.jstypescriptnpm

Extracting data from a JSON file with the help of Node.js

I've recently delved into node.js and find myself in a bit of a pickle. I have a json file called keyValue.json that looks something like this [ { "key": "key1", "value": "value1" }, { "key": "key2", "value": "value2" } ] I ...

javascriptnode.js

Harnessing the Power of Global Configuration in React

Lately, I've been delving into the world of ReactJS. One thing I'm trying to figure out is how to establish a global configuration variable like SERVER_IP_ADDR. My goal is to be able to use this global configuration variable when making API req ...

javascriptreactjs

Storing Dark Mode Preference in Local Storage using JavaScript

I recently implemented dark mode on my website and it's working flawlessly. However, every time I refresh the page, it reverts back to the default Day Mode view. Is there a way to save these preferences? In the HTML section: <body> &l ...

javascript

Adjusting body styles in a NextJS application using localStorage prior to hydration: A step-by-step guide

If you visit the React website and toggle the theme, your choice will be saved in localStorage. Upon refreshing the page, the theme remains persistent. In my NextJS project, I am attempting to achieve a similar outcome by applying styles to the body eleme ...

javascriptreactjsnext.js

Disable object rotation when hovering the mouse over it in three.js

I've created a function to prevent the rotation of a three.js object when the mouse hovers over it. function onDocumentMouseUp( event ) { event.preventDefault(); mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1; mouse.y = - ( event.clientY / w ...

javascriptthree.js

How to Update a Nested Document in Mongoose

I am currently working on a polls application using angular, express, and mongoose. Here is an overview of my data structure: var mongoose = require('mongoose'); var responseSchema = new mongoose.Schema({ responseText: String, votes: { ...

javascriptangularjsmongodbexpressmongoose

Encountering a SyntaxError with @font-face while utilizing the typeface-nunito-sans and @poi/plugin-vue-static

I have been working on a static app using Vue, Poi, @poi/plugin-vue-static, and typeface-nunito-sans. Everything seemed to be running smoothly until I encountered a Syntax Error during the build process: project/node_modules/typeface-nunito-sans/index.css ...

vue.jsserver-side-rendering

Tips for dynamically expanding the interface or type of an object in TypeScript

Currently, I am exploring the integration of PayPal's Glamorous CSS-in-JS library into a boilerplate project that also utilizes TypeScript. Glamorous provides a way to incorporate props into an element as shown below: const Section = glamorous.secti ...

javascriptreactjstypescriptjsxglamorous

Updating the input value in a React application

With a list and an edit button, upon clicking the edit button, a new modal opens. How can I auto-populate the selected username email? The server-side response is {this.test.name}, where I provide him with the input value to auto-populate. However, when ...

javascriptreactjs

how to implement dynamic water fill effects using SVG in an Angular application

Take a look at the code snippet here HTML TypeScript data = [ { name: 'server1', humidity: '50.9' }, { name: 'server2', humidity: '52.9', }, { name: 'server3', humidity: ...

javascripttypescript

Having trouble with page reload when implementing Angular Ui Router in Html5 mode with AngularJS?

Within my Angular app, I have implemented Angular UI Router and made use of HTML5 mode to eliminate the "#" from my URLs by utilizing the $locationProvider in the configuration. angular.module('myApp', ['ui.router']) .config(function( ...

javascriptangularjshtmlurlangular-ui-router

What is the method for converting a JSON file into an array list?

I am looking to convert my JSON file into an arraylist that can be utilized to showcase the information on a webpage. Here is my HTML file snippet: var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if(this.readyState == 4 &a ...

javascriptjson

Exploring the variance in outcomes when directly accessing an AuthService state versus utilizing a function in a React AuthContext

I am currently working on creating an AuthContext, but I am encountering an issue with changing the state of a variable. Here is the code snippet: index.js import Head from "next/head"; import Image from "next/image"; import styles fro ...

javascriptreactjsreact-context

Display the username on a Meteor React component

I'm facing an issue with one of my React components, which serves as the main layout for my application. It includes a navigation bar that displays the username of the currently logged-in user. The problem arises when Meteor.user() returns undefined d ...

javascriptmeteorreactjs

Traverse a computed attribute in Vue.js

I am working with a component that contains a simple array as its data: data() { return { roles: [ { id: '1' , name: 'admin'}, { id: '2' , name: 'user'}, { id: &a ...

javascriptvue.js