Vue Router 的 History 模式下传递 Props，避免空白页面

vue.js

2024-03-08 11:59:20

在 Vue Router 的 History 模式下传递 Props

问题

使用 Vue Router 的 History 模式时，传递给路由组件的 Props 可能会无法正常工作，导致页面变为空白。

解决方案

要解决此问题，需要进行以下步骤：

确保使用正确的 Hostname

在 index.html 文件中，<base> 标签中的 href 属性应指向应用程序的根 URL。

创建服务器端重定向

当用户直接访问 /user/:id 时，服务器需要将请求重定向到 index.html，即应用程序的根 URL。

正确配置 Vue Router

在 History 模式下，需要使用 base 选项指定应用程序的根 URL。

强制传递 Props

明确地将 props: true 设置在路由配置对象中，以强制传递 Props。

使用 Keep-Alive 组件

为了保持组件状态，可以在 UserProfile 组件中使用 keep-alive 组件。

完整示例

// index.html
<base href="/">

// server.js
app.get('*', function(req, res) {
  res.sendFile(path.join(__dirname, 'dist', 'index.html'));
});

// router.js
const router = createRouter({
  history: createWebHistory({
    base: '/'
  }),
  routes: [
    {
      path: '/user/:id',
      name: 'user',
      component: UserProfile,
      props: true
    }
  ]
});

// UserProfile.vue
<template>
  <keep-alive>
    <router-view></router-view>
  </keep-alive>
</template>