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

Question

我正在使用安装了 vue-router 的Vue-cli ，在我的App.vue我有<router-link to="/about" >About</router-link> ，它将在其中显示 about 组件的内容单击时。 现在，我想将 props 数据从About.vue传递给About.vue组件。 在<router-link to="/about" :myprops="myprops">About</router-link>中添加<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>那么 props 数据将被移交给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 或查询参数。 （如果 hat 不符合您的要求，您可能需要像 Vuex 这样的真实状态管理解决方案）

Param 必须在路由定义中定义（请参阅此处），而且您似乎不想要那样。

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

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

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

/about?myprop=somevalue

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

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