/?#/在Vue和Vue-router中是什么意思？

在Vue和Vue Router中，/?#/通常是一种URL的格式，它涉及到Vue Router的两种模式：Hash模式和History模式。

Hash模式

在Hash模式下，URL中的#符号后面的内容（包括#本身）不会被发送到服务器，而是由浏览器端的JavaScript来处理。这种模式的优点是兼容性好，因为即使在不支持HTML5 History API的旧浏览器中也能正常工作。

例如，URL http://example.com/?#/user 中的#/user部分就是Hash值，它表示当前路由的状态是user。

History模式

在History模式下，URL看起来更加美观，没有#符号。这种模式利用了HTML5的History API来管理浏览历史记录，使得URL更加清晰。但是，这种模式需要服务器端的支持，因为当用户直接访问或刷新非根URL时，服务器需要正确地返回相应的资源。

例如，URL http://example.com/user 在History模式下表示当前路由的状态是user。

应用场景

• Hash模式：适用于不需要服务器配置的项目，或者是在旧浏览器环境中运行的项目。
• History模式：适用于现代浏览器环境，且服务器能够正确处理SPA（单页应用）的路由。

遇到的问题及解决方法

如果你在使用Vue Router时遇到了问题，比如刷新页面后404错误，这通常是因为服务器没有正确配置来支持History模式。解决这个问题的方法是在服务器上配置一个通配符路由，将所有非静态资源的请求都指向你的index.html文件。

例如，在Nginx服务器上，你可以这样配置：

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

这样配置后，无论用户访问哪个路由，服务器都会返回index.html文件，然后由Vue Router在前端处理路由。

示例代码

以下是一个简单的Vue Router配置示例：

import { createRouter, createWebHashHistory } from 'vue-router';
import Home from './views/Home.vue';
import User from './views/User.vue';

const routes = [
{ path: '/', component: Home },
{ path: '/user', component: User },
];

const router = createRouter({
history: createWebHashHistory(), // 使用Hash模式
routes,
});

export default router;

在这个示例中，我们使用了createWebHashHistory来创建一个基于Hash模式的路由历史记录。

参考链接

• Vue Router 官方文档
• Nginx 配置示例

希望这些信息能帮助你更好地理解Vue和Vue Router中的/?#/以及相关概念。