vue嵌套路由刷新页面空白问题

问题描述

在vue项目开发中遇到这样一个问题，在history模式下通过页面点击路由跳转可以打开页面，但是在当前页面刷新就空白了，如下：

点击路由跳转页面是有的

 刷新页面就空白

代码

{
    path: "/home",
    name: "home",
    component: () => import("@/views/home.vue"),
    children: [
      {
        path: "",
        name: "moduleAll",
        component: () => import("@/views/moduleAll.vue"),
      },
      {
        path: "module",
        component: () => import("@/views/module.vue"),
      },
      {
        path: "/home/agree",
        name: "agree",
        component: () => import("@/views/agreement.vue"),
      },
    ],
  },

控制台报错

 经过百度后才知道是是 vue会把 http://localhost:8080/home/ 默认昨晚根路径，去根路径下找module是找不到的所以页面出不来；

解决办法：

在vue3的vue.config.js里有一个publicPath 属性 “./”改成“/”，就可以了

vue2同理，在build里修改 assetsPublicPath 属性 “./”改成“/”，如果还不行，在修改下index.html里的js连接

如果还不行就用 路由就是用 hash模式，这个模式会根据 #后面的内容内作为根路径，因此不会出现此问题。