Vue.js v3 通过路由器链接传递数据

Question

我在 Portfolio.vue 中有一个像这样的对象：

data() {
        return {
            portfolio: {
                front: [
                     { description: '1. project ', src: require("../assets/sample.jpg"),  slug: 'first'},
                     { description: '2. project', src: require("../assets/sample.jpg"),  slug: 'second' },
                     { description: '3. project', src: require("../assets/sample.jpg"),  slug: 'third' },
                ]
            }
        }
    }

Portfolio.vue：

<div class="">
               <div  v-for="(data,index) in portfolio.front" :key="index"> 
            <router-link  :to="'/portfolio/'+data.slug">  <div class="element" :data-description="data.description">
                   <img :src="data.src " alt=""> 
               </div>          
            </router-link>
               </div>
 </div>

PortfolioProduct.vue

<template>
    <div>
        <p>I want to take data to here. In here, i have to reach the data like this: portfolio.front.description</p>
    </div>
</template>

<script>

export default {
    props: {

    },
}
</script>

我的路线：

const routes = [
  {
    path: "/portfolio",
    name: "Portfolio",
    component: Portfolio,
  },
  {
    path: "/portfolio/:id",
    name: "PortfolioProduct",
    component: PortfolioProduct,
    props: true,
  },
];

我想从 Portfolio.vue 获取数据到 PortfolioProduct.vue ，我无法解决。我正在使用 vue js3，如果你帮助我，我会很高兴。谢谢

Answer 1

您可能可以使用模板文字，更改路由器链接如下：

<router-link  :to="`/portfolio/${data.slug}`">  <div class="element" :data-description="data.description">