当前位置：首页 > news >正文

vue-router路由问题：可以通过$router.push()跳转，但刷新后又变成空白页面

news 2025/7/19 5:37:00

pageage.json

"vue": "~3.1.5",
"vue-axios": "~3.2.4",
"vue-router": "~4.0.10",

代码没有问题，一直搞不懂为什么通过this.$router.push(“/paper/detail”)可以跳进去，但是进去之后再刷新就一直是空白页面，各种百度/问AI，要么说把mode的问题，换成hash/history；要么说服务端配置问题（静态前端跟服务端有毛的关系）；要么说需要路由嵌套（/paper的children里面写/detail，这2是同级的，又不是父嵌子）
在这里插入图片描述

最后终于意识到是publicPath: '/'的问题：
例如，在 vue.config.js 中：

module.exports = {publicPath: '/' // 默认是'./'
}

或者在 webpack.config.js 中配置静态资源目录：

output: {publicPath: '/static/',  // 根据需要修改路径
}

router.js

import { createRouter, createWebHistory } from 'vue-router';
import EleLayout from '@/layout/index';
// 静态路由
const routes = [{path: '/:pathMatch(.*)*',component: () => import('@/views/exception/404')},
];
const mainRouter = [{path: "/index",component: () => import('@/views/index/index'),meta: { title: "主页", keepAlive: true }},{path: "/paper",component: () => import('@/views/paper/index'),meta: { title: "公文", keepAlive: true },},{path: "/paper/detail",component: () => import('@/views/paper/detail'),meta: { title: "公文", keepAlive: true }},
]const router = createRouter({mode: 'history', // hash historyroutes,history: createWebHistory(),scrollBehavior: (to, from, savedPosition) => {if (savedPosition) {return savedPosition;} else {return { top: 0, left: 0 };}}
});router.beforeEach((to, from, next) => {// 将新的子路由添加到父路由中router.addRoute({path: '/',redirect: '/index',name: 'layout',component: EleLayout,children: mainRouter});    next({ ...to, replace: true });
});export default router;