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

前言

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

上一篇:SpringBoot -- IDEA使用thymeleaf 时热加载


下一篇:SpringBoot、thymeleaf 国际化配置