vue运行后为什么有#

Vue.js 运行后出现“#”的原因有以下几点：1、使用了默认的Hash模式；2、客户端路由的实现方式；3、避免服务器配置问题。Vue.js 在默认情况下使用 Hash 模式来管理客户端路由，这种模式会在 URL 中添加一个“#”符号，后面跟随路由路径。下面将详细解释这些原因，并提供相关背景信息。

一、使用了默认的Hash模式

Vue Router 默认使用的是 Hash 模式，这种模式会在 URL 中添加一个“#”符号。原因如下：

客户端路由是一种在单页应用（SPA）中管理页面导航的方式。Hash 模式是其中一种实现方式：

以下是这两种模式的比较：

Hash 模式的一大优势在于避免了服务器端的配置问题：

Hash 模式的工作原理：

Hash 模式通过监听 URL 中的 hash 变化来实现路由跳转。JavaScript 可以通过 window.location.hash 获取或设置当前的 hash 值，从而实现不同页面的导航。
History 模式的工作原理：

History 模式利用 HTML5 的 history.pushState 和 history.replaceState 方法来管理浏览历史和 URL。这样可以在不刷新页面的情况下更新 URL，并且可以通过服务器端配置将所有路由请求重定向到一个单一的入口文件（通常是 index.html）。
SEO 与用户体验：
- SEO 影响：Hash 模式由于 URL 中包含“#”符号，搜索引擎爬虫可能无法正确索引页面内容，从而影响 SEO。History 模式则可以生成更友好的 URL，有助于搜索引擎优化。
- 用户体验：History 模式生成的 URL 更加简洁、美观，有助于提升用户体验。

总结来说，Vue.js 运行后出现“#”符号是由于使用了默认的 Hash 模式，这种模式通过 URL 的 hash 部分来管理客户端路由，具有兼容性好、无需服务器配置的优点。然而，Hash 模式也存在 SEO 不友好和用户体验较差的问题。

进一步建议：

切换到 History 模式：如果你的应用需要更好的 SEO 和用户体验，可以考虑切换到 Vue Router 的 History 模式。需要注意的是，这种模式需要服务器端的配置支持，确保所有路由请求都返回到 index.html。
服务器配置：在使用 History 模式时，配置服务器以支持所有路由请求。例如，在 Nginx 中，可以通过以下配置实现：
```
location / {
    try_files $uri $uri/ /index.html;
}
```
了解路由模式：深入了解 Vue Router 的不同路由模式，选择适合自己项目需求的实现方式。

通过以上方法，你可以更好地理解和应用 Vue.js 的路由管理，提升应用的 SEO 和用户体验。