vue-router默认的hash模式——使用URL的hash来模拟一个完整的URL，所以当URL发生变化时，页面不会重新加载。如果不想要难看的hash，我们可以使用路由历史模式，它充分利用了history.pushStateAPI，可以在不重新加载页面的情况下完成URL跳转。constrouter=newVueRouter({mode:'history',routes:[...]})当你使用history模式时，URL就像一个普通的url，比如http://yoursite.com/user/id，还不错！不过要玩好这个模式，还需要后台配置支持。因为我们的应用是单页客户端应用，如果后台配置不正确，用户在浏览器中直接访问http://oursite.com/user/id时，会返回404，不好看.所以，你需要在服务器端添加一个涵盖所有情况的候选资源：如果URL没有匹配到任何静态资源，它应该返回相同的index.html页面，也就是你的应用所依赖的页面。后端配置示例注意：以下示例假设您从根目录为应用程序提供服务。如果要部署到子目录，则需要使用VueCLI的publicPath选项和关联的路由器基础属性。您还需要将以下示例中的根目录调整为子目录（例如，将RewriteBase/替换为RewriteBase/name-of-your-subfolder/）。ApacheRewriteEngineOnRewriteBase/RewriteRule^index\.html$-[L]RewriteCond%{REQUEST_FILENAME}!-fRewriteCond%{REQUEST_FILENAME}!-dRewriteRule./index.html[L]除了mod_rewrite，还可以使用FallbackResource。nginxlocation/{try_files$uri$uri//index.html;}NativeNode.jsconsthttp=require('http')constfs=require('fs')consthttpPort=80http.createServer((req,res)=>{fs.readFile('index.htm','utf-8',(err,content)=>{if(err){console.log('我们无法打开“index.htm”文件。')}res.writeHead(200,{'Content-Type':'text/html;charset=utf-8'})res.end(content)})}).listen(httpPort,()=>{console.log('服务器侦听：http://localhost:%s',httpPort)})#Express基于Node.js对于Node.js/Express，请考虑使用connect-history-api-fallback中间件。#InternetInformationServices(IIS)安装IISUrlRewrite在你网站的根目录下创建一个web.config文件，内容如下：<系统。webServer>#Caddyrewrite{regexp.*to{path}/}#Firebase你的firebase上的主机。在json中添加：{"hosting":{"public":"dist","rewrites":[{"source":"**","destination":"/index.html"}]}}WARNING给出警告，因为这样做之后，你的服务器将不再返回404错误页面，因为所有路径都会返回index.html文件。为了避免这种情况，你应该覆盖所有的路由情况，然后给出一个404页面。constrouter=newVueRouter({mode:'history',routes:[{path:'*',component:NotFoundComponent}]})或者，如果你使用Node.js服务器，你可以使用服务器端路由来匹配incomingURLs，当没有匹配到路由时返回404以实现回退。有关详细信息，请参阅Vue服务器端渲染文档。
