Vue Router 面试题, Vue Router 的 history 模式为什么刷新时会出现 404 错误?

Step 1

Q:: Vue Router 的 history 模式为什么刷新时会出现 404 错误？

A:: Vue Router 的 history 模式利用了 HTML5 的 History API 来实现 URL 路径的变化而不重新加载页面。然而，当用户直接在浏览器地址栏中输入一个 URL 并刷新页面时，浏览器会向服务器发出一个请求。如果服务器端没有相应的路由处理这个请求，就会返回 404 错误。为了解决这个问题，需要在服务器端配置一个回退路由，将所有的路径都重定向到单页应用的入口文件 index.html。

Step 2

Q:: 如何在服务器端配置 Vue Router 的 history 模式？

A:: 在使用 Node.js 和 Express 的情况下，可以在服务器端配置一个 catch-all 路由：

 
app.use((req, res, next) => {
  if (req.accepts('html')) {
    res.sendFile(path.resolve(__dirname, 'dist/index.html'));
  } else {
    next();
  }
});
 

对于 Nginx，可以使用以下配置：

location / {
  try_files $uri $uri/ /index.html;
}

Step 3

Q:: Vue Router 的 history 模式和 hash 模式的区别是什么？

A:: hash 模式使用 URL 的 hash 部分（即 # 后面的部分）来模拟一个完整的 URL，从而当 URL 改变时，页面不会重新加载。而 history 模式则是利用 HTML5 的 History API 来改写浏览器的历史记录，使得 URL 看起来更干净（没有 #）。但 history 模式需要服务器的支持，因为用户可能会直接访问某个嵌套 URL。

Step 1

Q:: Vue Router 的 history 模式为什么刷新时会出现 404 错误？

A:: Vue Router 的 history 模式依赖于 HTML5 的 history API，通过 pushState 和 replaceState 来实现 URL 的跳转和浏览历史的管理。然而，当你直接在浏览器地址栏输入一个 URL 并刷新页面时，浏览器会向服务器发出一个 GET 请求，如果服务器没有对该路径进行处理并返回一个正确的页面，就会出现 404 错误。解决这个问题的常见方法是在服务器端做 URL 重写，将所有的路由请求指向同一个入口文件，比如 index.html。

Step 2

Q:: 如何在 Vue 项目中配置 Vue Router 的 history 模式以避免 404 错误？

A:: 在 Vue 项目中配置 Vue Router 的 history 模式时，首先需要在 router/index.js 文件中将 mode 设置为 'history'，即 const router = new VueRouter({ mode: 'history', routes })。然后，需要在服务器端配置 URL 重写规则。例如，在 nginx 中，可以通过配置 location / { try_files $uri $uri/ /index.html; } 来将所有的请求都重定向到 index.html，从而避免 404 错误。

Step 3

Q:: Vue Router 中的 hash 模式和 history 模式有什么区别？

A:: Vue Router 提供了两种模式来管理路由：hash 模式和 history 模式。hash 模式利用 URL 中的 #（锚点）来模拟完整的 URL，从而实现无刷新页面跳转，这种模式不需要服务器配置。而 history 模式利用 HTML5 的 pushState 和 replaceState 方法来修改浏览器历史记录，这种模式下 URL 看起来更加美观，没有 # 符号，但需要服务器配合来处理路由。

Step 4

Q:: 如何在 Vue Router 中定义嵌套路由？

A:: 嵌套路由可以通过在路由配置中使用 children 属性来定义。比如，一个父级路由 /parent，可以包含多个子路由，这些子路由会相应地渲染在父级组件中预定义的 <router-view> 中。例子：{ path: '/parent', component: Parent, children: [{ path: 'child', component: Child }] }。访问 /parent/child 会渲染 Parent 组件并在其中嵌入 Child 组件。

Step 5

Q:: 如何使用 Vue Router 实现导航守卫？

A:: Vue Router 提供了全局守卫、路由独享守卫和组件内守卫，用于在路由跳转前或跳转后进行特定的操作。例如，全局前置守卫可以通过 router.beforeEach((to, from, next) => { /* ... */ }) 来注册，通常用于权限验证，检查用户是否有权限访问某些路由，如果没有权限可以重定向到登录页面或显示提示。

Step 1

Q:: Vue Router 的 history 模式为什么刷新时会出现 404 错误？

A:: Vue Router 的 history 模式依赖于浏览器的 history API，当用户在浏览器中手动刷新或直接访问特定路径时，浏览器会向服务器发出一个请求。由于服务器端默认情况下并没有配置去处理这些前端路由，服务器会尝试找到对应的资源文件，找不到时就会返回 404 错误。解决方案是在服务器端配置一个 catch-all 路由，重定向所有的请求到 index.html，这样前端 Vue 应用可以处理路由逻辑。

Step 2

Q:: 如何在 Vue 项目中配置服务器以支持 Vue Router 的 history 模式？

A:: 在大多数服务器上，都可以通过修改配置文件来支持 Vue Router 的 history 模式。例如，在使用 Nginx 时，可以在 nginx.conf 中添加一条规则：try_files $uri $uri/ /index.html;，该规则会尝试寻找对应的资源，如果找不到就返回 index.html，让 Vue Router 处理路由。

Step 3

Q:: Vue Router 的 hash 模式与 history 模式有什么区别？

A:: hash 模式使用 URL 的 hash (``#``) 来模拟一个完整的 URL，当 URL 改变时，页面不会重新加载，这也是默认模式。history 模式则使用浏览器的 History API 来实现 URL 跳转，不会在 URL 中出现 #。history 模式的 URL 更加美观和符合规范，但需要服务器的支持来避免刷新导致的 404 错误。

Step 4

Q:: 如何在 Vue Router 中使用路由守卫来保护路由？

A:: Vue Router 提供了几种路由守卫，例如 beforeEach、beforeEnter 等，可以用来在路由跳转前检查用户的权限或其他条件。例如，你可以在 beforeEach 中检查用户是否已登录，如果没有登录则重定向到登录页面。