如何在SpringBoot和VueJS中使用HTML5 URLS

时间:2018-03-15 14:52:33

标签: spring-boot vue.js vuejs2 vue-router

我的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 Boot中使用HTML5网址?

1 个答案:

答案 0 :(得分:2)

Vue如何处理网址可能有所不同。

尝试激活history mode for vue-router

context.Entry(bar).Reload()