最近正在写VUE3项目时，遇到了一个问题，页面一刷新就出错。
如下：
查看控制台报错信息是404。
这时候怎么刷新页面都没有用，只能重新输入地址，一想到每次代码发生改变我都要输入一遍地址，那心情都不好了。在网上看了许多方法都不行，初步判断应该是我的router路由的问题。
那么来看一下我的index.js的代码：
import { createRouter, createWebHistory } from 'vue-router'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
// 路由懒加载
const HomeView = () => import('../views/HomeView')
const LoginView = () => import('../views/LoginView')
const Main = () => import('../components/Main')
const ListView = () => import('../views/ListView')
const SingerListView = () => import('../views/SingerListView')
const SearchDetailPage = () => import('../components/search/SearchDetailPage')
const ExploreHome = () => import('../components/explore/ExploreHome')
const routes = [
{
path: '/',
redirect: '/home'// 重定向到首页页面
},
{
path: '/login',
component: LoginView
},
{
path: '/main', // Main.vue是路由的主体
component: Main,
// Main下的子路由，一切都在Main.vue的<el-main></el-main>里
children: [
{
path: '/home',
component: HomeView
},
{
path: '/listview',
component: ListView
},
{
path: '/singerlistview',
component: SingerListView
},
{
path: '/searchdetailpage',
component: SearchDetailPage
},
{
path: '/explorehome',
component: ExploreHome
}
]
}
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
router.beforeEach((to, from, next) => {
NProgress.start() // 进度条开始
next()
})
router.afterEach((to, from) => {
NProgress.done() // 进度条结束
})
export default router
也没有发现不对劲的地方。 害，这真是。。。
后面自己慢慢排查以及网友的评论发现是vue-router历史模式的问题，也就是说 vue3中的历史模式默认改为了HTML5模式：createWebHistory()
当我们去使用这种历史模式时，URL 会看起来很 "正常"，例如 https://xxxx.com/user/id。 不过，问题来了。由于我们的应用是一个单页的客户端应用，如果没有适当的服务器配置，用户在浏览器中直接访问 https://xxxx.com/user/id，就会得到一个 404 错误。问题所在
那怎么解决了？
我们只需要改一个地方将createWebHistory换成了createWebHashHistory（）
对了别忘了createWebHashHistory也要引入。（我这里是按需引入的）
最后，看一下完整代码：
import { createRouter, createWebHistory,createWebHashHistory } from 'vue-router'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
// 路由懒加载
const HomeView = () => import('../views/HomeView')
const LoginView = () => import('../views/LoginView')
const Main = () => import('../components/Main')
const ListView = () => import('../views/ListView')
const SingerListView = () => import('../views/SingerListView')
const SearchDetailPage = () => import('../components/search/SearchDetailPage')
const ExploreHome = () => import('../components/explore/ExploreHome')
const routes = [
{
path: '/',
redirect: '/home'// 重定向到首页页面
},
{
path: '/login',
component: LoginView
},
{
path: '/main', // Main.vue是路由的主体
component: Main,
// Main下的子路由，一切都在Main.vue的<el-main></el-main>里
children: [
{
path: '/home',
component: HomeView
},
{
path: '/listview',
component: ListView
},
{
path: '/singerlistview',
component: SingerListView
},
{
path: '/searchdetailpage',
component: SearchDetailPage
},
{
path: '/explorehome',
component: ExploreHome
}
]
}
]
const router = createRouter({
// history: createWebHistory(process.env.BASE_URL),
history:createWebHashHistory(),
routes
})
router.beforeEach((to, from, next) => {
NProgress.start() // 进度条开始
next()
})
router.afterEach((to, from) => {
NProgress.done() // 进度条结束
})
export default router
OK，解决了。
