解决vue router使用 history 模式刷新后404问题

解决Vue Router History模式刷新后的404问题——长沙网络推广的经验分享

在单页客户端应用中，使用Vue Router的History模式会使URL看起来像是正常的url，可以直接访问。但由于vue-router设置的路径并不是真实存在的路径，所以直接刷新就会返回404错误。对于这个问题，长沙网络推广给大家分享了一种解决方案。

要在服务端增加一个覆盖所有情况的候选资源。如果URL匹配不到任何静态资源，就应该返回同一个index.html页面。这个页面就是你app依赖的页面。也就是说，在服务端修改404错误页面的配置路径，让其指向到index.html。但这样做会导致服务器不再返回真正的404错误页面，因此你需要在Vue应用里覆盖所有的路由情况，然后给出一个404页面。

创建Vue Router实例时，设置mode为'history'，并创建一个路由指向NotFoundComponent，如下：

```javascript

const router = new VueRouter({

mode: 'history',

routes: [

{ path: '', component: NotFoundComponent }

]

})

```

这样便可以解决页面刷新后的404问题。但在IE浏览器下，仍可能会出现刷新后404的情况。这是因为IE浏览器对错误页面的处理有其特殊机制。当页面大小小于1024b时，IE会认为十分不友好，并将其替换为自己的错误提示页面。解决办法是充实一下index.html页面的内容，让页面大小超过1024b。

长沙网络推广提醒，充实后的index.html页面应如下所示：

```html

```

以上所述是长沙网络推广给大家介绍的解决vue router使用history模式刷新后404问题的方法，希望对大家有所帮助。如果在解决过程中有任何疑问，欢迎留言咨询，长沙网络推广会及时回复大家的。也感谢大家对于狼蚁SEO网站的支持！