刷新后无法在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 and 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 启动应用程序（您可以从网络流量中看到这一点）

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

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

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

希望对你有用！

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

Unable to load second level routing page in vuejs after refreshing it

javascript

vue.js

vue-router

vue-component