我的回答

vue-router使用history模式的时候是要改变url路径的, 这里路径改变之后需要让nginx重新定义到首页
node服务端永远是返回首页, 然后在首页根据url的不同再重定向到具体的页面

参考回答

Vue Router

Vue-router 默认是 hash 模式，使用 url 的 hash 来模拟一个完整的 url，当 url 改变的时候，页面不会重新加载。比如：使用 hash 模式的时候，那么访问变成 http://localhost:8080/page/#/这样的访问。但是如果路由使用history的话，那么访问的路径变成如下http://localhost:8080/page/.

需要注意的问题

如果使用的是 history 这种模式，在非首页情况下刷新页面或直接访问的时候就会返回 404，导致页面丢失。

这是因为利用 H5 history API 来实现的。通过 history.pushState 方法实现 URL 的跳转而无需重新加载页面。但是它的问题在于当刷新页面的时候会走后端路由，相当于直接在浏览器里输入这个地址，要对服务器发起 http 请求，但是这个目标在服务器上又不存在这个路由，所以会返回 404

解决方式：需要服务端的辅助来兜底，避免 URL 无法匹配到资源时能返回页面

Nginx 或者 node 作为服务端解决方式

Nginx 配置

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

node 配置

// 可以使用 connect-history-api-fallback 这个中间件
// npm install --save connect-history-api-fallback
// app.js
var history = require("connect-history-api-fallback");
var connect = require("connect");
var app = connect().use(history()).listen(3000);
// 或者使用 express
var express = require("express");
var app = express();
app.use(history());