为什么引导程序自动完成将vue.js路由器发送到/#/感叹号？

基础概念

引导程序（Bootstrap）通常是指在应用程序启动时执行的一系列初始化操作。Vue.js 是一个流行的前端框架，用于构建单页应用程序（SPA）。Vue Router 是 Vue.js 的官方路由管理器，用于管理页面之间的导航。

问题原因

当你提到引导程序自动完成将 Vue.js 路由器发送到 /#/感叹号，这通常是因为 Vue Router 默认使用的是哈希模式（Hash Mode），在这种模式下，URL 中会包含 # 符号。

优势

1. 兼容性：哈希模式不需要服务器配置，因为它是基于 URL 的哈希值进行导航的。
2. 简单性：实现简单，易于理解和调试。

类型

Vue Router 提供了两种模式：

1. 哈希模式（Hash Mode）：使用 URL 的哈希值来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。
2. 历史模式（History Mode）：依赖 HTML5 History API 和服务器配置，可以实现干净的 URL。

应用场景

• 哈希模式：适用于不需要服务器配置的场景，或者需要兼容旧版浏览器的场景。
• 历史模式：适用于需要干净 URL 的场景，但需要服务器配置支持。

解决方法

如果你不希望 URL 中出现 # 符号，可以将 Vue Router 切换到历史模式。以下是如何在 Vue 3 中配置历史模式的示例代码：

import { createRouter, createWebHistory } from 'vue-router';

const routes = [
  // 定义路由
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

参考链接

• Vue Router 官方文档

服务器配置

如果你选择使用历史模式，需要确保服务器能够正确处理所有的路由请求。以下是一些常见服务器的配置示例：

Apache

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

Nginx

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

通过以上配置，服务器会将所有的路由请求重定向到 index.html，从而实现单页应用程序的正常运行。

希望这些信息对你有所帮助！