如何在 SpringBoot 和 VueJS 中使用 HTML5 URLS

Question

我对我的 Vue 项目进行了以下设置...

import UploadComponent from './Upload.vue'
import MainPageComponent from './MainPage.vue'
...
const router = new VueRouter({
    routes: [
        { path: '/', component: MainPageComponent },
        { path: '/upload', component: UploadComponent }
    ]
});
...
let App = { router };
new Vue(App).$mount('#km-viewport');

然后在我的 html 我有...

<div id="km-viewport">
    <jg-app> </jg-app>
</div>

在 jg-app 中我有以下模板...

<md-app-content>
    <router-view></router-view>
</md-app-content>

然后为了使它与 Spring Boot 一起工作，我添加以下内容...

@Controller
public class MainEndpoint {
  @GetMapping("")
  public String rootRedirect(){return "redirect:/ui";}
  @RequestMapping("/ui")
  public String root(){
      return "splash";
  }
  @RequestMapping("/ui/upload")
  public String upload() { return "forward:/ui"; }
}

问题是我到达 <address>/ui 还是 <address>/ui/upload 它们都显示相同的 MainPageComponent。我不知道如何获取上传以显示上传组件。

如何在 VueJS 和 Spring 引导中使用 HTML5 url？

Answer 1

Vue 处理 URL 的方式可能有所不同。

尝试激活 history mode for vue-router:

const router = new VueRouter({
    mode: 'history',                       // <=================== added this line
    routes: [
        { path: '/', component: MainPageComponent },
        { path: '/upload', component: UploadComponent }
    ]
});

如何在 SpringBoot 和 VueJS 中使用 HTML5 URLS

How do I use HTML5 URLS with SpringBoot and VueJS

spring-boot

vue.js

vue-router

vuejs2