基于Spring Boot+Vue的博客系统 23——博客前台细节优化

使用history路由

vue-router 默认 hash 模式 —— 使用URL的hash来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。

我们可以在/src/router/index.js中修改router配置,使用history模式的路由。
设置history形式的路由
当使用 history 模式时,URL 就像正常的 url,例如 http://yoursite.com/user/id
但是在使用history路由的时候也要注意后端的配置,因为一旦刷新页面,浏览器就会按URL向服务请求资源,浏览器并不知道这是路由。针对这种这种情况,Vue-Router官网提供了不同服务器的解决方法,这里以ngnix为例,只需在配置中添加以下配置即可:
添加配置

详情可以参考:https://router.vuejs.org/zh/guide/essentials/history-mode.html

路由懒加载

当打包构建应用时,JavaScript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。

这时我们的路由可以写成这样(当我们每个路由的代码有很多的时候,比如我们配置子路由的时候,也可以将component属性抽取成单独一个文件):
路由懒加载

发布了126 篇原创文章 · 获赞 12 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/li3455277925/article/details/102756343