Springboot+thymeleaf结合Vue，通过thymeleaf给vue赋值解决Vue的SEO问题

2024-03-12 23:38:26

前言

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传递进去。

原文链接：https://www.coderbbb.com/article/n

码农公寓

前言

核心思路

主要内容

一、thymeleaf+vue的SEO优化

二、thymeleaf如何给vue赋值、传递参数

相关文章