问题描述
vue-router路由较为常见的模式有hash模式和history模式两种, 但是hash模式路径中带有#符号, 多少让人看着有点不爽, 个人多是用history模式比较多.
通常子路由配置如下所示, 正常访问路由都正常, 但是, 刷新页面时, 嵌套路由就崩了, 而且控制台报错一些乱七八糟的东西. 而且加载的静态文件都为 404 .
{
path: '/home',
name: 'Home',
redirect: { name: 'Page1' },
component: () => import('@/views/home/index'),
meta: { title: 'home' },
children: [
{
path: 'page1',
name: 'Page1',
component: () => import('@/views/home/page1'),
meta: { title: 'page1' }
}
]
}
异常原因
因为在 vue.config.js 中配置了 publicPath: './', 导致在history模式下的根路径变为相对路径, 而导致引入的资源会根据该相对路径寻找资源当然找不到了.
而hash模式下, 或者配置 publicPath: '/' 根路径就是固定的 / 所以路径地址很明确了, 是正常的
解决方案
- 使用路由的
hash模式 - 将
vue.config.js配置中的publicPath: '/'设置为/或者其他部署项目的路径下, 例如/h5, 不要设置为相对路径即可, 也可注释掉改配置, 默认就是/
注意
- 上线部署的时候 history 模式也会出现这种问题, nginx配置处理可参考该文章 nginx启动vue项目刷新页面404
