Vue cli 通过路由器链接传递道具(数据)

本文介绍了Vue cli 通过路由器链接传递道具(数据)的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

限时送ChatGPT账号..

我正在使用安装了 vue-router 的 Vue-cli，在我的 App.vue 中，我有 <router-link to="/about" >About</router-link> 在其中它将在点击时显示 about 组件的内容.现在，我想将 props 数据从 App.vue 传递给 About.vue 组件.在 <router-link to="/about" :myprops="myprops">About</router-link> 中添加 :myprops="myprops" 不起作用，这就是为什么我添加跟随 App.vue :

I am using Vue-cli with vue-router installed, inside my App.vue I've got <router-link to="/about" >About</router-link> in which it's going to display the content of about component on click. Now, I would like to pass props data to About.vue component from `` App.vue. Adding :myprops="myprops" inside <router-link to="/about" :myprops="myprops">About</router-link> didn't work that's why I add the following to App.vue :

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

Inside About.vue 组件我做了 props:['myprops'] 来获取道具数据并使用 {{myprops}}> 显示它.现在，如果在 App.vue 中，我添加 <my-about :myprops="myprops"></my-about> 那么道具数据将是移交给 About.vue 并会显示，但 About.vue 的内容也会显示在我的 App.vue 页面上，它将在 About.vue 中重复.我不想要那个.我只需要将 myprops 数据传递给 About.vue 组件而不显示 App.vue 内的 About.vue 内容代码>.而且，这是我在 router/index.js 中的路径代码以供参考:{ path: '/about', component: About }

Inside About.vue component I did props:['myprops'] to get the props data and by using {{myprops}} to display it. Now, if inside App.vue, I add <my-about :myprops="myprops"></my-about> then the props data will be handed over to About.vue and will be display but the content of About.vue also will be display on my App.vue page and also, it is going to repeat itself inside About.vue. I don't want that. I just need to pass the myprops data to About.vue component without displaying the About.vue content inside App.vue. And, this is my path code inside router/index.js for reference: { path: '/about', component: About }

我怎样才能做到这一点?

How can I be able to do that?

推荐答案

路由器不是用来传递数据的.它旨在将 URL 映射到组件.所以你可以做的是在 URL 中传递 props，作为 params 或查询参数.(如果帽子不符合您的要求，您可能需要像 Vuex 这样的真实状态管理解决方案)

A Router is not meant to be used to pass data around. It's meant to map URLs to coponents. So what you can do is to pass the props in the URL, as params or query parameters. (If hat doesn't suit your requirements, you will likely need a real state management solution like Vuex)

必须在路由定义中定义一个参数(见这里) 并且您似乎不想要那样.

A Param has to be defined in the route definition (see here) and it seems you don't want that.

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

You can pass the info as a query parameter, the link looks like this:

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

最终的 URL 将如下所示:

The resulting URL will end up looking like this:

/about?myprop=somevalue

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

Then, this query parameter is available as this.$route.query.myprop in any component. To pass it as an actual prop to the About component specifically, you need to configure the router to do so:

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

这篇关于Vue cli 通过路由器链接传递道具(数据)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！