Using VueJS to pass props to route components via this.$router.push

Router Configuration Example :

const routes = [
    { path: '/' , redirect: '/login'},
    { path: '/chat', component: MyChat, props: true},
    { path: '/login', component: MyLogin},
  ]

Defining the Chat Component with Props :

export default {
    name: "MyChat",
    props:{
      avatar_url : {
        type: String,
      }
    }

Using Router Push to Pass Props :

this.$router.push({path:'/chat',props: {avatar_url: 'rrrrrrr'}});

Directly Passing Props in Routes Array Works:

const routes = [
    { path: '/' , redirect: '/login'},
    { path: '/chat', component: MyChat,props: {avatar_url: 'myurl'}},
    { path: '/login', component: MyLogin},
  ]

Issue arises when trying to pass props using this.$router.push. Any insights on how to solve this would be appreciated.

Answer №1

When using boolean mode in Vue, only route parameters are passed through as props. This means that if you want to include something like avatar_url, it would need to be part of the URL structure:

{ path: '/chat/:avatar_url', component: MyChat, props: true},

In Vue 2, you could still access other props from the route using function mode:

{
  path: '/chat',
  component: MyChat,
  props: route => ({ avatar_url: route.props.avatar_url })
},

It's unclear whether this same functionality exists in Vue 3.

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

Verifying user login on NodeJS through connection from an IIS-hosted website

I am currently upgrading an outdated CMS system and looking to implement a real-time chat feature. The existing CMS operates on IIS, MSSQL, and PHP. The chat feature will be hosted on a separate Linux box running Node.js and Socket.io After successfully ...

Storing a reference to children generated by a function within a child prop

I am currently working on a Feed component that accepts a data prop, consisting of an array of items, and a children prop intended for a function that maps the data to a DOM element. My current challenge is implementing the ability to scroll to any elemen ...

Using Angular NgRx - triggering an action from an effect once certain actions yield a result

I'm encountering difficulties in dispatching actions that require results from five other actions (all listed in my effect). Could someone lend a hand? Essentially, I need to trigger an action within the effect only after these five actions have retu ...

Encountered an error while trying to load a resource: the server returned a 404 (Not Found) status code while attempting to edit a form using

I am facing an issue with navigating to the correct path after editing a form in React. Following the update, the web page refreshes and unexpectedly logs me out of the site even though there are no errors detected during the process. The console displays ...

Struggling with lag in MaterialUI TextFields? Discover tips for boosting performance with forms containing numerous inputs

Having some trouble with Textfield in my MateriaUI project. The form I created has multiple inputs and it's a bit slow when typing or deleting values within the fields. Interestingly, there is no lag in components with fewer inputs. UPDATE: It appear ...

Confirm the email address using the autocomplete feature in the field

I'm currently utilizing Material UI to design an autocomplete field with multiple inputs that gives users the option to either choose from existing email addresses or input their own. An example of what I'm trying to achieve can be seen here: ht ...

Ordering AngularJS by property name with spaces

While working with the MEAN stack and jade, I encountered an issue with AngularJS when using ng-repeat, ng-click, and orderby to sort columns in a table. Everything was working well until I tried sorting by a column named "To Do" which contains a space. Th ...

struggling with responseText functionality in javascript

I am encountering an issue with passing variables from PHP to JavaScript using JSON. The problem lies in the fact that I am able to debug and view the items in the responseText within my JavaScript, but I am unable to assign them to a variable or properly ...

Having trouble getting the bootstrap animation to function properly on elements inside a sliding window

I want the text on my slider to smoothly fade in as it enters the view (my Elementor builder includes a carousel-type slider). To achieve this effect, I included the following code snippet in the header section of my page: <link rel="stylesheet" href ...

Ways to retrieve a property that is dynamically generated within a React component

In the code snippet below, I have registered the TextField name as M1.${index}.M13-M14 and it is marked as required. However, I am unable to locate the property accessor using errors[`M1.${index}.M13-M14`]?.type, which prevents the error from being gener ...

What is the best way to add spaces between each element in an array of arrays that are nested within a map

Hello there! I'm seeking guidance on correctly formatting a Multi-Array (an array of arrays) that is nested within a map array. To simplify, I have the following code snippet: const [gradosData, setGradosData] = useState([]) const agregarComa = (grado ...

Struggling to get CORS request to function properly

I am encountering a CORS issue while trying to retrieve data from a webservice on a different domain. Within my controller, I have the following code: $http({method: 'GET', url : 'http://somewebserviceapi.com?idAppli=' + appId, header ...

Retrieve the current exchange rate for the specified trading pair in United States Dollars

I am in the process of developing a bot that utilizes the Binance API. I am looking to obtain the USD value for each trading pair similar to what is displayed in their App (refer to screenshot). Is there a method available through their API to accomplish t ...

Adding a scrollable feature to a Bootstrap Modal seems to be generating additional unnecessary pages at the

I need help with my scrollable bootstrap modal that has a print button on top. When the user clicks the button, I want to print the modal content. Here is the code snippet: HTML : <div class="container-fluid" id="body-noPrint"> /* HTML BODY CON ...

Fluctuating display issues arise when attempting to display both non-authenticated and authenticated content on a single page

(Nuxt project) I am currently facing a challenge in displaying both non-authenticated and authenticated content on the same page. I have been exploring two potential solutions but each has its drawbacks. The first option involves determining in the mount ...

how to use $emit to modify a computed property in VueJS

I have a form with multiple components for input fields, each containing another component for displaying errors. Here is the code: // Input component <template></template> <script> import Store from '../../store' exp ...

Adding the classname "active" in ReactJS can be achieved by utilizing the `className` attribute within

I am facing an issue with adding the active classname in my code. Can anyone suggest a solution to add the active classname for this section: <li onClick = {() => onChangeStatus({status: 'on-hold'})} className = {appState === {'status& ...

Trouble with passing the function variable to setState efficiently

Although I haven't worked with React for a while, it seems like this issue is more related to plain JS. Here is the setState function that I am using: // click event on parent for performance reasons ``Component:`` const [active, setActive] = useSta ...

Overwriting Resolved Data in Angular UI-Router Child States

I'm facing an issue where the resolve function is the same in both parent and child states, but I need it to return different values based on the child state. Instead of customizing the implementation for each state, it seems to be inheriting the beha ...

Animate my banner images only after they have fully loaded using Jquery

I recently came across a banner image slideshow in jQuery, but it seems to be animating even before the images are fully loaded. This results in the slideshow displaying image descriptions without the actual images themselves. Can anyone help me modify th ...