VUE接收Spring MVC返回的ModelAndView内的属性

场景：最近在迁移代码环境，从以往JSP迁移到VUE，以往后台传前台通过ModelAndView传递视图与属性，现在VUE如何获取呢？现在总结了一下，看代码。Vue：这样定义属性一定要加上<script th:inline="javascript"><script th:inline="javascript">var listMenu = [[${listMenu}]];&l

风萧萧兮易水寒ˆ

5466人浏览 · 2020-07-22 13:25:37

风萧萧兮易水寒ˆ · 2020-07-22 13:25:37 发布

场景：最近在迁移代码环境，从以往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

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}$/, //不连续的两位字母// /^