vue.js - Vue cli 通过路由器链接传递 Prop (数据)

Question

我正在使用 Vue-cli安装了 vue-router，在我的内部 App.vue我有 <router-link to="/about" >About</router-link>它将在单击时显示 about 组件的内容。现在，我想将 Prop 数据传递给 About.vue来自``App.vue 的组件。在 <router-link to="/about" :myprops="myprops">About</router-link> 中添加 :myprops="myprops"没有用，这就是为什么我将以下内容添加到 App.vue :

<script>
import About from './components/About.vue';
export default {
  name: 'App',
 components:{'my-about':About}
  data(){return {...}
  },
props:{myprops:[{.....}]}
}
</script>

内 About.vue我做的组件 props:['myprops']获取 Prop 数据并使用 {{myprops}}来显示它。
现在，如果在 App.vue 里面, 我加 <my-about :myprops="myprops"></my-about>那么 Prop 数据就会交给 About.vue并且会显示 About.vue的内容也将显示在我的 App.vue 上页面，而且，它会在 About.vue 里面重复自己.我不想要那个。我只需要通过 myprops数据到 About.vue组件不显示 About.vue里面的内容 App.vue .
而且，这是我在 router/index.js 中的路径代码以供引用: { path: '/about', component: About }
我怎么能做到这一点？

Answer 1

这假设您不是 Vue 的初学者。

1 - 在目标组件上定义一个 prop

export default {
    name: "MyComponent",
    props: {
        exampleProp: Object
    }
}

2 - 使用 定义路由 Prop :真实

...
    routes: [
        {
            path: '/mycomponent',
            name: 'MyComponent',
            component: MyComponent,
            props: true
        },
...

3 - 使用路线 姓名 在路由器链接而不是路径上，并将 Prop 作为参数传递。

<router-link 
    :to="{ name: 'MyComponent', 
           params: { exampleProp: examplePropValue }}">
    Link to My Component
</router-link>