我的 vue-router 配置哪里出了问题，或者问题出在我的组件中？

Posted 2023-02-22

【中文标题】我的 vue-router 配置哪里出了问题，或者问题出在我的组件中？

【英文标题】：Where did I go wrong with vue-router configuration, or the problem is somewhere in my component?

【发布时间】：2020-02-22 10:17:04

【问题描述】：

我有我在 Home vue 组件中输出的用户列表。列表中的每个项目都来自 vuex，并且有自己的详细信息。当我单击任何此联系人列表项时，vue-router 会将我带到路由 /contact/that-item-id 例如contact/4536475。现在，当我在该页面上查看特定联系人列表项并刷新我的浏览器 vue 应用程序中断时，换句话说，我不再有权访问该特定项目对象属性。 这是我的路由器的代码

export default new Router(
  routes: [
    
      path: "/",
      name: "Home",
      component: Home
    ,
    
      path: "/contact/:id",
      name: "ContactDetails",
      props: true,
      component: ContactDetails

我将 props 属性设置为 true，因此我可以将其作为参数传递给联系项目详细信息组件，如下所示：

<router-link
   class="view-more-btn"
   :to=" name: 'ContactDetails', params:  id: contact.id "
>VIEW DETAILS</router-link>

最后我将该 ID 传递给我在 vuex 中的 getters 方法以获取单击项目的详细信息，如下所示：

export default 
  props: ["id"],
  computed: 
    contact() 
      return this.$store.getters.getContactDetails(this.id);
    
  

我哪里出错了，为什么我不能刷新我的联系人项目详细信息页面并且仍然保留我正在使用的状态。

我是 vue 的新手，所以如果我没有意义，请原谅我。当然欢迎任何帮助，在此先感谢

【问题讨论】：

我不太明白问题出在哪里，但如果是关于保留信息，如果你能更好地向我解释的话，还有keep-alive。

【参考方案1】：

问题可能在于，您正在引用命名路由并手动传递参数。这不会更改浏览器地址栏中显示的实际路线，只会显示根路径（我假设您的示例中为/contact/）。因此，当您刷新传入的参数/道具时，根本就不存在了。

您需要做的是使用<router-link :to="'/contact/'+contact.id"> 或<router-link :to="`/contact/$contact.id`"">。

这应该会影响浏览器地址栏中的 URL，使其包含 /contact/someID123，这也会使 ID 在刷新时可用。

【讨论】：

但是我怎样才能访问那个特定的 id（在我的情况下我将它作为路由器参数传递），我需要从商店获取该项目的数据，也就是说我需要它来呈现在我的详细信息组件中绑定到该 ID 的特定数据

ID 将作为属性在您的组件中可用，因为您使用 path: '/contact/:id 和 props: true 配置了路由。

然后提供一个代码框或 jsfiddle 来展示您的示例，否则我们无能为力。

我有这个在 github repo github.com/MarkoCvrljak/vue-contact-book-app