前言

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

相关文章：