What is the process for updating parameters before finalizing a route in Vue.js?

I have set up a route with a value parameter:

  routes.push({
    name: 'test',
    path: '/test/:value',
    component: resolve(__dirname, 'src/pages/test.vue'),
  });

Now, I want to modify the route so that it also includes both value and test as parameters:

  routes.push({
    name: 'test',
    path: '/test/:value',
    component: resolve(__dirname, 'src/pages/test.vue'),
    beforeEnter(to, from, next) {
      to.params.test = 'test';

      next({ params: to.params });
    },
  });

This way, I will be able to access these parameters in a vue page:

async fetch({ store, route }) {
  console.log(route.params.value);
  console.log(route.params.test);
},

However, the code for the beforeEnter is not functioning correctly as the new test parameter is not being sent. Any suggestions on how to fix this?

Answer №1

It appears that the next function accepts a params object as an argument

next(to.params)

Although this method works, it is not documented anywhere in the official documentation

Check out the example codepen for a working demonstration

If you are still encountering issues, consider logging the params as shown in the codepen example

Answer №2

Consider adding a path/name to the next step, such as:

  routes.push({
    name: 'example',
    path: '/example/:value',
    component: resolve(__dirname, 'src/pages/example.vue'),
    beforeEnter(to, from, next) {
      next({ name: 'example', params: { example: 'example' });
    },
  });

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

troubles with compatibility between bootstrap.css and IE11

I am currently developing a web application using AngularJS and bootstrap.css. While everything appears fine on Chrome, I am facing some formatting issues on both Firefox and IE11. HEAD <head> <meta charset="utf-8"> <meta http-equi ...

When utilizing the `useLocation` hook, the location information appears to be missing

When utilizing a HashRouter, and inside a component making use of useLocation, there seems to be an inconsistency between the window.location object and the location object retrieved from useLocation. While writing this, I have observed that there might b ...

How can I show the real width of an image on a mobile device?

I have integrated the infinite slide plugin from jQueryscript.net into my website. While it works perfectly on desktop with background images, I am facing an issue on mobile devices where the image width needs to be displayed in full. I attempted to adjust ...

Guide to automatically filling in a form's fields with information from a database by clicking on a link

Currently, I have a form in HTML that is designed to gather user/member information. This form connects to a database with multiple columns, with two key ones being "user_email" and "invoice_id". Upon the page loading, the input for "user_email" remains hi ...

Tips for implementing resizable Material-UI Dialogs

I'm working on a project that involves creating a dialog box that can be resized and dragged. While I found steps in the Material-UI Dialog documentation on how to make it draggable, I'm still looking for information on how to make it resizable. ...

Vue.js 2: Keep an eye on changes, but wait until after the initial data fetch

I recently entered the Vueverse (using Vue.js 2) and I'm encountering some challenges with the watch feature. When the component is mounted, I fetch data from an API and use it to set the value of a radio button. Essentially, I have two radio buttons ...

Issue with uploading media on Wordpress: "Unfortunately, an error occurred during the upload process. Please attempt again at a later time."

Often times, when trying to upload media from the front-end, I encounter this issue: An error occurred during the upload process It seems like the error occurs sporadically, making it even more challenging to troubleshoot. Sometimes, when logging in fo ...

Issue with Knockoutjs Custom Binding for Radio Button Groups Failing to Update Selection

I am currently working on creating a unique custom binding in knockout that is similar to the default options binding handler, but instead of a dropdown, it utilizes radio buttons. Whenever an item is added to the array, the update is triggered. However, ...

Footer button overrides list components due to improper implementation of vertical ion-scroll

Having some trouble setting up ion-scroll on a specific screen in my mobile application built with Ionic. On the Book page of my app, I'm encountering two main issues: https://i.stack.imgur.com/MnheG.png 1) The placement of the Confirm button doesn& ...

Issue with electron-vue: Unable to modify Vuex state when using RxJS subscribe

I need help with my code involving two functions in the mutations and two pieces of state const state = { files: [], uploadProgress: 0 } const mutations = { SET_UPLOAD_IMAGE: (state, files) => { state.files = files }, UPLOAD_IMAGE: ( ...

Searching for documents in MongoDB that meet specific criteria has become possible through the use

Criteria: COUNT the total number of documents in the collection WHERE objects.objectType is 'group' AND (objects.objectType is NOT 'person' AND relation is 'Exposed_to') Expectation: should return the count of all documents W ...

Currently seeking user coordinates for Vue implementation

I recently started using Vue and I'm working on capturing the lat/long of a user to be used in other functions within Vue. Currently, I am retrieving the coordinates and plan to utilize them in an API but for now, I am just logging them. Although I c ...

The printer is malfunctioning

My webpage has a div that includes various input fields with values assigned using jQuery. I wanted to print the contents of this div, so I found some code online to help me achieve this. However, when I try to print, the values in the input fields end up ...

Restrict the quantity of items retrieved from an AJAX response

An AJAX call has returned a response consisting of a list of <a> elements: <a href="/1/">One</a> <a href="/2/">Two</a> <a href="/3/">Three</a> I am looking to select only the first n a elements from this response ...

Update the color of the text depending on the background color

When hovering over my CTA, a sliding effect occurs. However, I am facing an issue with the text being difficult to read depending on the background color. To better understand what I'm trying to achieve, you can view the demo here: Demo on CodePen T ...

Issue 404: Trouble sending form data from React to Express

I'm facing an issue when trying to send form data from a React frontend to my Node.js/Express backend. The problem seems to be related to a 404 error. I've included only the relevant code snippets below for reference. Function for submitting the ...

Guide on displaying a Custom 2D shape on both sides using three.js

As a beginner to three.js and 3D programming in general, I recently used three.js to draw a sector. However, I am facing an issue where I can only see the object in one direction but not in the opposite direction. It appears that the same phenomenon is h ...

Locate a string containing a series of words separated by a character, with the last word being able to end with any combination of characters through the use of regex

Here are some words to consider: const words = ["apple", "orange", "tomato"] const str = "apple.orange.tomato.$COULD_$_BE_ANY_STRING_HERE" I am in search of a regular expression to verify the format of this string. ...

Remove the color options from the Material UI theme

Can certain color types be excluded from the MUI palette in MUI v5? For example, can background and error colors be removed, allowing only colors defined in a custom theme file to be used? I attempted using 'never' but it did not provide a solut ...

Tips for testing components with React JS using jest and enzyme

Attempting to perform a unit test on the code snippet below: handleChange = (e) => { let localState = Object.assign({}, this.state) localState[e.target.name] = e.target.value this.setState(localState) this.props.addMetaInformation(localState) } } I&a ...