场景：最近在迁移代码环境，从以往JSP迁移到VUE，以往后台传前台通过ModelAndView传递视图与属性，现在VUE如何获取呢？现在总结了一下，看代码。

Vue：这样定义属性 一定要加上 <script th:inline="javascript">

<html lang="zh-CN"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
      layout:decorator="layout" xmlns:v-bind="http://www.w3.org/1999/xhtml">


<script th:inline="javascript">

    var listMenu = [[${listMenu}]];
  

</script>

</html>

后台代码：

 @RequestMapping("/")
    public ModelAndView index() {
        List<Map<String,Object>> li = new ArrayList<>();
        ModelAndView mav = new ModelAndView();
        mav.addObject("listMenu",li);
        mav.setViewName("index");
        return  mav;
    }

 

注意：发现很多朋友发现一直报错 Uncaught SyntaxError: Unexpected token

解决办法：

           需要引入 依赖

  <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
            <version>1.5.18.RELEASE</version>
   </dependency>    
spring:
  application:
    name: xxxserver
  profiles:
    active: dev
  thymeleaf:
    content-type: text/html
    prefix: classpath:/templates/
    mode: LEGACYHTML5
    encoding: UTF-8
    cache: false

 

# java
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue