How to pass multiple params in vue-router from component data

Question

I want to create "VendorDetail.vue" component and fetch data from component "Vendors.vue". In "Vendors.vue" there some list object that user can choose and display it on "vendorDetail.vue". So in "VendorDetail.vue", pass id props and display the object from route.

How can i solve it?

In 'routes.js'

import Home from './components/Home.vue'
import Login from './components/Login.vue'
import Join from './components/Join.vue'
import TentangKami from './components/TentangKami.vue'
import CaraPrint from './components/CaraPrint.vue'
import RegisterUser from './components/RegisterUser.vue'
import RegisterPartnership from './components/RegisterPartnership.vue'
import DashboardUser from './components/user/Dashboard.vue'
import Dashboard from './components/partnership/Dashboard.vue'
import Profil from './components/partnership/Profil.vue'
import Produk from './components/partnership/Produk.vue'
import Pesanan from './components/partnership/Pesanan.vue'
import Dicetak from './components/partnership/Dicetak.vue'
import VendorDetail from './components/user/VendorDetail.vue'
import Completed from './components/user/Completed.vue'
import Vendors from './components/user/Vendors.vue'

//const url = 'http://127.0.0.1:8000/api/board/'

const routes = [
    {
        path: '*',
        redirect: '/login'
    },
    { 
        path: '/', 
        name: 'home',
        component: Home 
    },
    { 
        path: '/login', 
        name: 'login',
        component: Login 
    },
    {
        path: '/register-user',
        name: 'register-user',
        component: RegisterUser
    },
    {
        path: '/register-partnership',
        name: 'register-partnership',
        component: RegisterPartnership
    },
    { 
        path: '/join', 
        component: Join 
    },
    { 
        path: '/tentang-kami', 
        component: TentangKami 
    },
    { 
        path: '/cara-print', 
        component: CaraPrint 
    },
    {
        path: '/dashboard-partnership/:id',
        component: Dashboard,
        children: [
            {
                path: '',
                component: Profil
            },
            {
                path: 'profil',
                component: Profil
            },
            {
                path: 'produk',
                component: Produk
            },
            {
                path: 'pesanan',
                component: Pesanan
            },
            {
                path: 'dicetak',
                component: Dicetak
            },
        ]
    },
    {
        path: '/dashboard-user/:id',
        component: DashboardUser,
        props: true,
        children: [
            {
                path: '',
                component: DashboardUser,
                name: 'dashboard-user'
            },
            {
                path: 'vendors',
                component: Vendors,
                name: 'vendors',
            },
            {
                path: 'vendor-detail/:id',
                component: VendorDetail,
                name: 'vendor-detail',
                props: true
            },
            {
                path: 'completed',
                name: 'completed',
                component: Completed
            }
        ]
    },



];

export default routes;

In 'src/components/user/Vendors.vue'

<template>
    <div class="flex pa2 justify-between ph5">
        <div class="fl w-50 w-25-m w-20-l pa2 " v-for="board in boards" :key="board.id">
            <router-link to="'/dashboard-user/id/vendor-detail/' + board.id" class="db link dim tc grow dashboard--card">
            <img src="../../assets/img/print1.png" alt="Profil Percetakan" class="w-100 db"/>
            <dl class="mt2 f6 lh-copy ph3">
                <dt class="clip">Title</dt>
                <dd class="ml0 black truncate w-100 tl">{{board.name}}</dd>
                <dt class="clip">Artist</dt>
                <dd class="ml0 gray truncate w-100 tl">{{board.description}}</dd>
            </dl>
            </router-link>
        </div>
    </div>
</template>

<script>
/* eslint-disable */ 
import axios from 'axios'
import { mapState, Store } from 'vuex'
const url = 'http://127.0.0.1:8000/api/board/'
export default {
  name: 'Vendors',
  data() {
    return {
      user: 'Hilman Luthfi',
      boards: [],
      search: null
    }
  },
  mounted() {
    axios.get(url)
      .then(response => {
        this.boards = response.data
        console.log(response.status)
        console.log(response.data)
      })
      .catch((error) => {
        console.log(error)
      })
  },
}
</script>

In 'src/components/user/VendorDetail.vue'

<template>
    <div>
        <div class="mw9 center ph3-ns mt5-ns">
            <div class="cf ph2-ns">
                <div class="fl w-100 w-40-ns pa2 mh4 tl">
                    <img src="../../assets/img/print1.png" alt="Profil Percetakan" class="w-90"/>

                    <div>
                        <p class="f4 b ttu mv4">detail pemesanan</p>    
                        <div class="pv2">
                            <label for="rangkap" class="f6 db lh-copy">Rangkap</label>
                            <input type="number" name="rangkap" id="rangkap" v-model="rangkap" />       
                        </div>  
                        <div class="pv2">
                            <label for="halaman" class="f6 db lh-copy">Halaman</label>
                            <input type="number" name="halaman" id="halaman" v-model="halaman" />       
                        </div>
                        <div class="pv2">
                            <label for="jenis-kertas" class="f6 db lh-copy">Jenis Kertas</label>
                            <select name="jenis-kertas" id="jenis-kertas" v-model="jenisKertas">
                                <option value="a4">A4</option>
                                <option value="a3">A3</option>
                                <option value="a2">A2</option>
                            </select>
                        </div>
                        <div class="pv2">
                            <label for="jenis-print" class="f6 db lh-copy">Jenis Print</label>
                            <select name="jenis-print" id="jenis-print" v-model="jenisPrint">
                                <option value="hitam-putih">Hitam Putih</option>
                                <option value="berwarna">Berwarna</option>
                            </select>
                        </div>
                        <div class="pv2">
                            <label for="finishing" class="f6 db lh-copy">Finishing</label>
                            <select name="finishing" id="finishing" v-model="finishing">
                                <option value="jilid">Jilid</option>
                                <option value="hard-cover">Hard Cover</option>
                            </select>
                        </div>
                        <div class="pv2">
                            <label for="warna-cover" class="f6 db lh-copy">Warna Cover</label>
                            <select name="warna-cover" id="warna-cover" v-model="warnaCover">
                                <option value="putih">Putih</option>
                                <option value="biru">Biru</option>
                                <option value="kuning">Kuning</option>
                                <option value="merah">Merah</option>
                                <option value=hijau>Hijau</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="fl w-100 w-50-ns ph2">
                    <h4 class="f2 tl">{{ board.name }}</h4>
                    <p class="lh-copy tl">{{ board.description }}</p>
                    <p class="b f4 mv3 pt3 tl">Upload dokumenmu disini</p>
                    <div>
                        <div id="file-box">
                        <input id="input-file" placeholder="Lepaskan Filemu disini" class="db mv3" type="file" name="file" />
                        <p id="label-file">Lepaskan Filemu disini</p>
                        </div>
                    </div>
                    <textarea id="input-message" name="message" class="db mv4" type="text" placeholder="Tambahkan Pesan" v-model="pesan"/>
                    <p class="f4 b ttu tl">total harga</p>
                    <p class="f4 b tl">Rp {{ total }}</p>
                    <hr>
                    <input type="button" @click="orderNow" value="Cetak Sekarang" class="f6 grow no-underline br-pill ph4 pv3 mv2 b white" />
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import Axios from 'axios'

const url = 'http://127.0.0.1:8000/api/board/'

export default {
    name: 'VendorDetail',
    props: ['id'],
    data() {
        return {
            user: 'Hilman Luthfi',
            total: '15.000,00',
            rangkap: '',
            halaman: '',
            pesan: '',
            jenisKertas: '',
            jenisPrint: '',
            finishing: '',
            warnaCover: '',
            board: {}
        }
    },
    created() {
        Axios.get(url + this.$route.params.id + '/')
            .then(response => {
                this.board = response.data
                console.log(response.status)
                console.log(response.data)
            })
            .catch(error => {
                console.log(error)
            })
    },

    methods: {
        orderNow: () => {
            this.$router.push({name: 'completed'})
        }
    }
}
</script>

Answer 1

this.$router.push({
    name: "output",
    params: { searchResults: this.searchResults}
  });

Here in output component you need to create a Prop with name of "searchResults" and thats it. In that prop you will get this.searchResults value.

Answer 2

UPDATED :

you can pass a prop with in a router-link like this :

<router-link :to="{ name: 'vendor-detail', params: { id: board.id }}"></router-link>