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.

Answer 1

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!

Answer 2

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>'