javascript - 刷新后无法在vuejs中加载二级路由页面

Question

我的 VueJS 应用正在运行。它工作正常，但唯一的问题是当我尝试刷新二级或三级路由页面时，它在控制台中显示一条错误消息，指出:

Failed to load resource: the server responded with a status of 404 ()

例如，

http://localhost:8080呈现我的主页。刷新没有问题。

http://localhost:8080/details呈现详细信息页面。刷新没有问题。

http://localhost:8080/details/users呈现用户页面。刷新时，它会出错。

我也为 http://localhost:8080/details/assets 定义了类似的链接和 http://localhost:8080/details/groups页面刷新时出现的所有错误。以下是 main.js 的代码:

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'

import { routes } from './routes';


Vue.use(VueRouter);

//Vue.config.productionTip = false

const router = new VueRouter({
  mode: 'history',
  routes  
});

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})
new Vue(Vue.util.extend({ router }, App)).$mount('#app');

对于routes.js:

import Home from './components/summary.vue'
import Details from './components/details/details.vue'
import Users from './components/details/users/users.vue'
import Assets from './components/details/assets/assets.vue'
import Groups from './components/details/groups/groups.vue'

export const routes = [
    { path: '/', component: Home},
    { path: '/details', component: Details},
    {path: '/details/users', component: Users},
    {path: '/details/groups', component: Groups},
    {path: '/details/assets', component: Assets}
];

关于如何解决这个问题有什么想法吗？

Answer 1

如vue-router官方文档所述

To get rid of the hash, we can use the router's history mode, which leverages the history.pushState API to achieve URL navigation without a page reload

因此仅在前端导航不会向后端发送请求，这是您的 spring boot 应用程序(您可以从网络流量中看到这一点)

但是，当您刷新页面时，请求会直接发送到后端，从而导致 404 错误。

要解决您的问题，一种选择是将默认 404 页面设置为 index.html，建议 here

@Component
public class WebConfiguration implements EmbeddedServletContainerCustomizer {
    @Override
    public void customize(ConfigurableEmbeddedServletContainer configurableEmbeddedServletContainer) {
        configurableEmbeddedServletContainer.addErrorPages(new ErrorPage(HttpStatus.NOT_FOUND, "/index.html"));
    }
}

希望对你有用!