Vue动态路线在手动导航或页面刷新时不显示内容

如何解决Vue动态路线在手动导航或页面刷新时不显示内容

我有一个Projects视图/路由，该视图/路由循环显示JSON列表并填充多个ProjectCard组件，每个组件都链接到具有不同内容的动态页面。因此，用户流程如下所示：

• 用户登陆“索引”页面
• 点击router-link to="/projects"
• 在Projects视图上，他们看到多个ProjectCards，每个链接到类似于/projects/foo或projects/bar的URL。这些显示了ProjectPage组件。

ProjectPage组件将在用户按上述方式导航时呈现应有的效果。但是，问题在于，如果用户应该复制/粘贴完整路径，例如website.com/projects/foo，或者如果他们刷新页面，则相关的道具将不会显示。如果以下面的我的ProjectPage组件为例，则<h1>将正确地渲染，因为那只是一些静态文本，但是我的<p>标签根本不会渲染，因为它没有收到道具出于某种原因。使用Vue调试器检查组件后，显示出textString在刷新或手动导航时未定义。

您可以在此CodeSandbox

看到问题的发生

为简洁起见，切出一些不相关的代码。

Projects.vue路线

<template>
    <ProjectCard
        v-for="project in ProjectList"
        :key="project.id"
        :url="project.src"
    />
</template>

<script>
    import ProjectList from "@/assets/lists/projectList.json";

    export default {
        data() {
            return {
                ProjectList
            };
        }
    };
</script>

ProjectCard.vue组件

<template>
    <router-link :to="{ name: 'ProjectPage',params: { testString: 'This is a test string',id: url } }" >
<template>

<script>
    export default {
        props: {
            url: String // A simple string like table or scissors
        }
    };
</script>

ProjectPage.vue组件

<template>
    <div>
        <h1>Project Page</h1>
        <p>{{ testString }}</p>
    </div>
</template>

<script>
    export default {
        props: {
            testString: String
        }
    };
</script>

路由器index.js文件

const routes = [
    {
        path: "/projects",name: "Projects",component: Projects
    },{
        path: "/projects/:id",name: "ProjectPage",component: ProjectPage,props: true
    },{
        path: "*",component: FourOhFour
    }
]

const router = new VueRouter({
    mode: "history",routes
});

如您所见，我的路由器已设置为处理历史记录模式，并且我的Web服务器（该服务器托管在Netlify上）也已配置了适当的重定向。

我怀疑这与ProjectPage可以接收道具的唯一方式是通过ProjectCard。如果用户从不与组件交互，则ProjectPage永远不会将需要的道具传递到组件上。

如何重新格式化我的组件和视图以浏览此问题？请注意，我只是在使用JSON文件，并且没有可调用的任何外部API来获取需要填充的数据，因此我无法避免所讨论的JSON文件。 JSON的结构如下：

[
  {
    "id": 0,"title": "Foo","description": "Lorem Ipsum Dolor Sit Amet","altText": "Foo","src": "foo","image": {
      "webp": "/images/projects/foo.webp","jpg": "/images/projects/foo.jpg"
    },"texts": [
      "lorem ipsum dolor sit amet","lorem ipsum a second time again"
    ]
  }
]

解决方法

我已经找到了可行的解决方案。

问题出乎我的意料，道具永远不会有机会在刷新或手动导航到页面时传递到组件上。发生的事情是Vue会将用户引导到正确的组件，但是由于在任何地方都没有指定它，所以不知道什么道具放在哪里。通常，在使用这样的动态路由的情况下，您会从API获取一些数据，因此包括功能就变得很容易了，因为无论如何您都需要获取数据。但是，我使用的是静态JSON文件，因此我觉得没有必要包括一种最初获取数据的方法，但是显然那样行不通。

因此，解决方案很简单：用户进入组件时获取数据。只需使用Vue Router beforeRouteEnter或afterRouteEnter方法，就像这样：

<template>
    <div>
        <h1>Project Page</h1>
        <p>{{ title }}</p>
    </div>
</template>

<script>
    import ProjectList from "@/assets/lists/projectList.json";

    export default {
        name: "ProjectPage",data() {
            return {
                title: null
            };
        },methods: {
            setProjectPage(projectDetails) {
                this.title = projectDetails.title;
            }
        },beforeRouteEnter(to,from,next) {
            const currentProject = ProjectList.find(project => project.id === to.params.id);
            next(page => {
                page.setProjectPage(currentProject);
            });
        }
    };
</script>

因此，现在，在导航Vue将获取JSON之前，填充它必须填充的所有data（），然后一切都会正常显示。实际上，这使从ProjectCards传递道具变得多余，因为我仍然可以访问完整的JSON对象，因此可以删除该部分，而可以将其作为到Component的简单链接。我尚不确定这与诸如缓存之类的行为如何配合，但是我会在过桥时将其烧掉。

使用beforeRouteEnter时要记住的一个小警告是，Vue在调用created()钩子之前不会访问组件的数据或道具。当然，该解决方案非常简单，Vue Router的next()可以访问正在导航到的 next 组件，因此您可以通过访问它来调用beforeRouteEnter中的任何方法在代码的next()部分中。