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

pageage.json

js 复制代码
"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 中:

js 复制代码
module.exports = {
  publicPath: '/' // 默认是'./'
}

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

js 复制代码
output: {
  publicPath: '/static/',  // 根据需要修改路径
}

router.js

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 history
  routes,
  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;
相关推荐
袁煦丞6 分钟前
家用NAS+云盘自由NanoPi R4S+iStoreOS:cpolar内网穿透实验室第460个成功挑战
前端·程序员·远程工作
浏览器API调用工程师_Taylor26 分钟前
日报自动化实战:告别手动复制粘贴
前端·javascript·node.js
晴殇i31 分钟前
JavaScript还能这样写?!ES2025新语法让代码优雅到极致
前端·javascript·程序员
浏览器API调用工程师_Taylor41 分钟前
我是如何将手动的日报自动化的☺️☺️☺️
前端·javascript·爬虫
东哥很忙XH1 小时前
flutter开发的音乐搜索app
android·javascript·flutter
前端Hardy1 小时前
HTML&CSS&JS:抖音爆火的满屏“关心弹幕”酷炫卡片,已经帮你打包好了,快来体验吧!
前端·javascript·css
江城开朗的豌豆1 小时前
我的Vue项目胖成球了!用Webpack给它狠狠瘦个身
前端·javascript
WebInfra1 小时前
Rspack 1.6 发布:让打包产物更小、更纯净
前端·javascript·前端框架
Mintopia1 小时前
⚙️ Next.js 接口限流与审计全攻略 —— 用 @upstash/ratelimit 打造优雅“闸门”
前端·javascript·全栈
Mintopia2 小时前
🌐 实时翻译 + AIGC:Web跨语言内容生成的技术闭环
前端·javascript·aigc