Sending props from different routes to the same component using Vue JS

Question

I'm building a menu app using Vue JS. I was told that only have to use 1 component if the styling stays the same. So that means i have to use dynamic data. each menu/submenu has 3 to 4 menu links. I was looking for a solution to send variables with data to a component and came up with 'props'. But i couldn't find a way to send props from different routes to the same component and check which route you're on to know which props to load into the html.

I already tried to load props into a template, and that works fine. But sending and replacing prop values in the same part of html is something i haven't figured out yet.

 { path: '/list', component: List, props: { url: 'www.google.com' } }

<template>
    <div class="container">
        <h1>Welkom</h1>
        <div class="row">
            <div class="col-md-6">
                <router-link to='/weed'>Wiet</router-link>
            </div>
            <div class="col-md-6">
                <router-link to='/stuff'>Stuff</router-link>
            </div>
            <div class="col-md-6">
                <router-link to='/joint'>Joint</router-link>
            </div>
            <div class="col-md-6">
                <router-link to='/edibles'>Edibles</router-link>
            </div>
        </div>
    </div>
</template>

the <router-link> should dynamic depending on which route you are, so it can load in different menu items.

I want a menu that loads in different route links depending on which route you are.

You may need Vuex

talkhabi
– talkhabi

2019-09-04 14:49:31 +00:00
Commented Sep 4, 2019 at 14:49 — talkhabi
– talkhabi, Commented Sep 4, 2019 at 14:49

Ashwin Bande · Accepted Answer · 2019-09-05 04:49:37Z

2

I think you should use Programmatic Navigation and query params like

router.push({ path: 'register', query: { plan: 'private' } })

so for your application use

<div class="col-md-6"
     @click="$router.push({ path: '/edibles',
             query: { url: 'www.google.com', other: 'etc' }})"
 >Edibles</div>

you can access these query params in the navigated component using $route.params.url in a template and this.$route.params.url in functions and computed and all other properties of vue component instance.

also check https://router.vuejs.org/guide/essentials/navigation.html for details

Edit as per comment

I think you should still use Programmatic Navigation with

router.push({ name: 'user', params: { userId } })

the params provided can be used as props to the component as shown below

    const User = {   
    props: ['id'],   
    template: '<div>User {{ id }}</div>' 
} 
const router = new VueRouter({   
    routes: [     
        { path: '/user/:id', component: User, props: true }      
    ] 
})

just remember to set props: true in routes definition!

edited Sep 5, 2019 at 4:49

answered Sep 4, 2019 at 15:15

Ashwin Bande

3,1232 gold badges13 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jorn Reed Over a year ago

I'm not sure, but i don't think that is what i mean. I have 1 template(component) called menu. I want to use just that one component, for every menu. For example the head menu has 2 links. Let's say the links are food and drinks. If i click on drinks for example. I want the app to open the exact same component. But with 2 different links on the same spots in the html, for example soda's and iced drinks. And so on for every menu.

Jorn Reed Over a year ago

Or maybe this:

js { path: '/food', component: Menu, props: {url_1: '/cold_food', url_1_name: 'Cold Food', url_2: '/warm_food', url_2_name: 'Warm food' } } { path: '/drinks', component: Menu, props: {url_1: '/cold_drinks', url_1_name: 'Cold Drinks', url_2: '/warm_drinks', url_2_name: 'Warm drinks' } }

using the same variable props with different data

Jorn Reed Over a year ago

I still don't get it why to use params. The links should change depending on which route you are. But i don't need to send dynamic content through the urls like id's in your example.

Leander van Diepen · Accepted Answer · 2020-05-19 18:56:00Z

0

You can use params from your route as props in your component and use a watcher to react to route changes. Either have a state system (vuex) with which you can access specific data regarding the params or just plainly use the params.

Use: router.push({ path: '/user/${userId}' })

then

watch: {
  $route(to, from) {
    // react somehow
  }
}

and/or

template: '<div>User {{ $route.params.id }}</div>'

answered May 19, 2020 at 18:56

Leander van Diepen

454 bronze badges

Collectives™ on Stack Overflow

Sending props from different routes to the same component using Vue JS

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related