Vue cli 通过路由器链接传递道具（数据）

Question

我使用Vue-cli安装VUE路由器，在我的App.vue我有<router-link to="/about" >About</router-link>其中这将显示有关组件的上点击的内容。现在，我想将 props 数据About.vue从 ``App.vue传递给组件。在里面添加 :myprops="myprops"<router-link to="/about" :myprops="myprops">About</router-link>不起作用，这就是为什么我将以下内容添加到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']为了获取道具数据并使用{{myprops}}它来显示它。现在，如果在里面App.vue，我添加<my-about :myprops="myprops"></my-about>然后道具数据将被移交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 - 使用props: true定义路线

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

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

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

Answer 2

路由器并不是用来传递数据的。它的目的是将 URL 映射到组件。因此，您可以做的是将 URL 中的 props 作为 params 或查询参数传递。（如果帽子不适合您的要求，您可能需要像 Vuex 这样的真实状态管理解决方案）

必须在路由定义中定义 Param（请参阅此处），但您似乎不希望这样做。

您可以将信息作为查询参数传递，链接如下所示：

<router-link :to="{ path: '/about', query: { myprop: 'someValue' }}">
  About
</router-link>

最终生成的 URL 将如下所示：

/about?myprop=somevalue

然后，该查询参数在任何组件中都可用this.$route.query.myprop。要将其作为实际的 prop 传递给组件About，您需要配置路由器来执行此操作：

{
  path: '/about', 
  component: About,
  props(route) {
    return {  myprop: route.query.myprop }
  }
}