前言

vue開發(fā)的項目有時候會有SEO的需求，由于vue是JavaScript框架，內(nèi)容都在JavaScript和服務(wù)端，所以SEO效果很差。vue的服務(wù)端渲染又很難和現(xiàn)在成熟的springboot等后端框架契合。本文介紹一種通過springboot+thymeleaf這樣傳統(tǒng)的前后端分離方案，再整合vue，從而在兼顧vue開發(fā)便利性的同時，獲得不錯的SEO效果。

核心思路

  • 將需要SEO的內(nèi)容，通過springboot賦值給thymeleaf，然后由thymeleaf直接渲染出來。
  • 不需要SEO的內(nèi)容、交互性比較強(qiáng)的內(nèi)容。通過thymeleaf模板里的vue代碼來完成交互。
  • 需要SEO，又有一定的交互性，想用Vue來開發(fā)。這種情況，使用springboot傳遞內(nèi)容給thymeleaf，然后thymeleaf傳遞給Vue，Vue使用slot來渲染。【聽著很暈沒關(guān)系，后面一看代碼就明白了】

主要內(nèi)容

  • 如何使用thymeleaf+vue才能有一定的SEO效果
  • 如何在springboot+thymeleaf框架下整合vue，使用thymeleaf給vue賦值。

一、thymeleaf+vue的SEO優(yōu)化

設(shè)想一個需求：開發(fā)一個導(dǎo)航欄，導(dǎo)航欄的導(dǎo)航鏈接由后端返回，需要SEO，讓搜索引擎爬蟲能夠抓取。同時導(dǎo)航欄鏈接的active激活效果，又想用vue來控制。導(dǎo)航欄的用戶頭像等信息不需要SEO，但有比較復(fù)雜的交互狀態(tài)。比如消息提醒角標(biāo)等等。

思路： 使用vue開發(fā)一個名為HeaderNav的組件，導(dǎo)航欄的內(nèi)容通過slot傳入組件，導(dǎo)航鏈接通過Vue的插槽Prop特性，由HeaderNav組件控制class實現(xiàn)。大概的代碼如下：

<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>

這樣的設(shè)計，能夠讓搜索引擎的爬蟲爬取到slot中的導(dǎo)航鏈接，同時又可以使用vue來控制各種交互效果。

二、thymeleaf如何給vue賦值、傳遞參數(shù)

在thymeleaf中使用vue，需要SEO的內(nèi)容肯定要通過thymeleaf來傳遞給vue。這方面很難找到對應(yīng)的文檔，作者把自己的實戰(zhàn)經(jīng)驗寫出來。

  • 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的內(nèi)容，里面有對應(yīng)的vue method，method的入?yún)⒖梢允褂胻hymeleaf傳遞進(jìn)去。

版權(quán)聲明：《??Springboot+thymeleaf結(jié)合Vue，通過thymeleaf給vue賦值解決Vue的SEO問題??》為CoderBBB作者「???」的原創(chuàng)文章，轉(zhuǎn)載請附上原文出處鏈接及本聲明。

原文鏈接：https://www.coderbbb.com/articles/7

相關(guān)文章：