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

喜欢ヅ旅行 2023-06-10 07:25 13阅读 0赞

> 废弃说明：  
> 这个专栏的文章本意是记录笔者第一次搭建博客的过程，文章里里有很多地方的写法都不太恰当，现在已经废弃，关于SpringBoot + Vue 博客系列，笔者重新写了这个系列的文章，不敢说写的好，但是至少思路更加清晰，还在看SpringBoot + Vue 博客系列文章的朋友可以移步：https://blog.csdn.net/li3455277925/category\_10341110.html，文章中有错误的地方或者大家有什么意见或建议都可以评论或者私信交流。

#### 使用history路由 ####

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

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

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

#### 路由懒加载 ####

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

这时我们的路由可以写成这样（当我们每个路由的代码有很多的时候，比如我们配置子路由的时候，也可以将`component`属性抽取成单独一个文件）：  
![路由懒加载][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpMzQ1NTI3NzkyNQ_size_16_color_FFFFFF_t_70]

[history]: /images/20230531/ba85f4092e6749e388e3ddf6bcfef837.png
[20191026143718812.png]: /images/20230531/238f55d52e3b4f12959736dca740ebe1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpMzQ1NTI3NzkyNQ_size_16_color_FFFFFF_t_70]: /images/20230531/8df2170a0e934c92882e756597c87ff4.png