时间戳

首页 > 解决方案 > 使用动态 URl 在 Vue3 中选择“$root”对象条目

vue.js - 使用动态 URl 在 Vue3 中选择“$root”对象条目

问题描述

在我的 Vue3 应用程序中，该$root对象具有listData条目。
使来自 App.vue 的 JSON 数据在所有视图中都可访问
此条目包含许多（> 1.000）对象（例如汽车），它们具有始终相同的属性（ID、名称等）。

我想创建一个显示单个对象属性的页面。（Car.name、Car.motor、Car.image 等）。
在路由中使用通配符我将请求转发到details.vue：

{ path: '/:path(.*)', component: details, props:true, },

还有一个硬编码链接：

<router-link to="/Car_1">Car_1</router-link>

这行得通。

然后我想从$root.listData对象中找到对应的入口并输出：

export default {
  data() {
    return {
      dataSS: [],
    };
  },
  mounted() {
    let name = this.$route.params.path;
    let data = this.$root.listData;
    for (let i = 0; i < data.length; i++) {
      const el = data[i];
      // console.log(el.ID)
      if (el.name === name) {
        this.dataSS = data[i]
      }
    }
  },
}

如果页面是通过 链接到的，这也有效， <router-link>但如果页面是直接从浏览器调用的，则无效。
然后 for 循环工作，但数组dataSS[]保持为空。

首先，这是实现我的目标的“正确”方式，还是有更好的方式？
其次，如何实现它们在直接调用中也显示？

编辑，在 StevenSiebert @19:11 发表第一条评论之后

假设是正确的，this.$root.listData当 for 循环开始时仍然为空。所以dataSS可以完全没有内容。

偶然我意识到了这个.filter()功能：

computed: {
    dataSS: function () {
        this.dataSS = this.$root.listData.filter(SS => SS.name == this.$route.params.path)[0];
        return this.dataSS
    },
},

有了这个，<router-link>在浏览器刷新之后通过 和 显示内容。

但是，浏览器刷新后，我在控制台中收到以下错误消息：

Uncaught (in promise) TypeError: $options.dataSS is undefined

但这仅当我访问对象的属性{{ dataSS.name }}而不是对象作为一个整体显示时才这样做{{ dataSS }}。即使预定义 dataSS 也没有什么区别。

data() {
    return {
        dataSS: { 'country': '', 'city': '', 'foundingyear': '', 'name': '' }
    };
},

为什么只有在访问属性时才会出现错误消息，而不是整个对象？
为什么预定义不能防止错误？

标签： vue.jsvue-routervuejs3

解决方案

我假设this.$root.listData当您在浏览器中调用 url 时未加载，因为您的应用程序在您手动调用时“重新启动”，就像浏览器刷新一样。我建议使用vuexwithvuex-persistedstate以使您的数据即使在重新加载后也可用。

当你这样做时，你可以使用你的函数async并await确保你不会在没有数据的情况下运行它。

推荐阅读