前言
vue开发的项目有时候会有SEO的需求，由于vue是javascript框架，内容都在JavaScript和服务端，所以SEO效果很差。vue的服务端渲染又很难和现在成熟的springboot等后端框架契合。本文介绍一种通过springboot+thymeleaf这样传统的前后端分离方案，再整合vue，从而在兼顾vue开发便利性的同时，获得不错的SEO效果。
核心思路
- 将需要SEO的内容，通过springboot赋值给thymeleaf，然后由thymeleaf直接渲染出来。
- 不需要SEO的内容、交互性比较强的内容。通过thymeleaf模板里的vue代码来完成交互。
- 需要SEO，又有一定的交互性，想用Vue来开发。这种情况，使用springboot传递内容给thymeleaf，然后thymeleaf传递给Vue，Vue使用slot来渲染。【听着很晕没关系，后面一看代码就明白了】
主要内容
- 如何使用thymeleaf+vue才能有一定的SEO效果
- 如何在springboot+thymeleaf框架下整合vue，使用thymeleaf给vue赋值。
一、thymeleaf+vue的SEO优化
设想一个需求：开发一个导航栏，导航栏的导航链接由后端返回，需要SEO，让搜索引擎爬虫能够抓取。同时导航栏链接的active激活效果，又想用vue来控制。导航栏的用户头像等信息不需要SEO，但有比较复杂的交互状态。比如消息提醒角标等等。
思路： 使用vue开发一个名为HeaderNav的组件，导航栏的内容通过slot传入组件，导航链接通过Vue的插槽Prop特性，由HeaderNav组件控制class实现。大概的代码如下：
<Header-Nav
:login-Modal-Show="false"
v-bind:login-Status-Prop="true"
th:v-bind:login-Status-Prop="|${userDO ne null}|"
>
<template v-slot:nav="slotProps">
<ul class="inline-flex ml-10 py-5 font-semibold" id="navTop">
<li class="px-3">
<a style="letter-spacing: 3px;" :class="slotProps.navClass.index" href="/">
博客
</a>
</li>
<li class="px-3"><a style="letter-spacing: 3px;"
:class="slotProps.navClass.book"
href="/books.html" th:href="@{/books}">专栏</a></li>
</ul>
</template>
</Header-Nav>
这样的设计，能够让搜索引擎的爬虫爬取到slot中的导航链接，同时又可以使用vue来控制各种交互效果。
二、thymeleaf如何给vue赋值、传递参数
在thymeleaf中使用vue，需要SEO的内容肯定要通过thymeleaf来传递给vue。这方面很难找到对应的文档，作者把自己的实战经验写出来。
- thymeleaf赋值给vue的v-bind。
th:v-bind:login-Status-Prop="|${userDO ne null}|"，不要使用v-bind的简写:变量，一定要使用v-bind:变量。然后用|来包围thymeleaf的$赋值语法。 - thymeleaf赋值给vue的v-on。
th:v-on:click="|jump(\'${name}\')|"，使用|包围click的内容，里面有对应的vue method，method的入参可以使用thymeleaf传递进去。