时间戳

首页 > 解决方案 > 如何从组件数据中传递 vue-router 中的多个参数

vue.js - 如何从组件数据中传递 vue-router 中的多个参数

问题描述

我想创建“VendorDetail.vue”组件并从组件“Vendors.vue”中获取数据。在“Vendors.vue”中有一些列表对象，用户可以选择并将其显示在“vendorDetail.vue”上。所以在“VendorDetail.vue”中，传递 id props 并显示来自路由的对象。

我该如何解决？

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

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

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

标签： vue.jsaxiosparameter-passingvue-router

解决方案

更新 ：

你可以像这样传递一个道具router-link：

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

推荐阅读