Vue-router History形式下，空缺页面，怎样设置tomcat服务器

2024年4月18日 350次阅读 来源: seomaster

页面404

刚用vue开辟项目没多久，许多时候都在坑里逐步探索，本日要填的坑是在vue-router开启history形式后，直接进入路由子目次，页面会报404。为何呢，缘由很简单。由于这个路由子目次在服务器上基础不存在，直接进去，浏览器固然404了。

计划

所以须要后端合营，在服务器上设置一下，假如浏览器要求页面找不到了，则一致返回index.html页面，也就是把index.html看成404来使。

[HTML5 History 形式](https://router.vuejs.org/zh-cn/essentials/history-mode.html)

设置

文档中写了apache和nginx服务器怎样设置，这里增加一下tomcat服务器里使怎样设置的。
我这里的是在WEB-INF目次下的web.xml文件中增加
<error-page>
    <error-code>404</error-code>
    <location>/index.html</location>
</error-page>

空缺页面

本认为如许就完毕了，效果涌现空缺页面，而且资本加载都没题目，之前hash形式，一切一般，改成history形式就挂了，一脸懵逼。
然后查资料修正测试了两个小时，才发明是由于我这里vue宣布后的代码是放在/COMS目次，也就是说不是根目次，这类状况下得在路由设置文件中增加base根目次：
const router = new Router({
    //开启history形式须要后端设置404时返回/index.html
    mode: 'history',
    //当项目不在根目次时，必需增加子目次途径，不然空缺页面（资本加载一般）
    base: '/COMS',
    routes: [
        //404页面
        { path: '*', component: ErrorPage },
        {...}
    ]
})

两步解决题目，能够直接http://www.demo.com/login进入页面，圆满！
然则假如访问了一个不存在的路由，http://www.demo.com/loginxxx，这时候怎么办？
看上面，给出的代码已写了，增加一个ErrorPage组件，由前端路由来处置惩罚毛病页面。

完毕

到此完毕，此致敬礼！
    原文作者：seomaster
    原文地址: https://segmentfault.com/a/1190000010379441
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞