网上找了好多,大部分说的是将
{ path: '*', redirect: '/404', hidden: true }
放在路由最后就可实现,但亲测这种方式对history方式的路由配置无效,history需要使用下面的方法来实现,已经验证过线上是可行的
const createRouter = () => new Router({
mode: 'history', // require service support
scrollBehavior: () => ({ y: 0 }),
routes: Routes
})
history方式需要服务端支持,浏览器地址栏的路径在刷新时会请求服务端,但服务端找不到文件会返回404,所以服务端nginx要增加重定向,将请求重新定位回index页面
nginx完整配置如下:
server {
listen 80;
server_name mydomain.com;
root /wnmp/www;
index index.html index.htm index.php;
#增加重定向回index.html页面
location / {
try_files $uri $uri/ /index.html;
index index.html;
}
}