前言
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傳遞進去。
版權聲明：《Springboot+thymeleaf結合Vue，通過thymeleaf給vue賦值解決Vue的SEO問題》為CoderBBB作者「ʘᴗʘ」的原創文章，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://www.coderbbb.com/article/n