vue在路由页面刷新404前端如何解决

在前端，可以通过使用History API来解决Vue路由页面刷新404的问题。History API提供了pushState()和replaceState()方法，可以修改浏览器地址栏中的URL，而不会引起页面的刷新。通过使用pushState()或replaceState()方法，我们可以将当前路由的URL添加到浏览器的历史记录中，这样在刷新页面时，浏览器就不会向服务器发送请求了，而是直接从浏览器缓存中加载页面。

以下是一个使用Vue Router和History API来解决路由页面刷新404的示例代码：

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const router = new Router({
  mode: 'history',
  routes: [
    // 路由配置
  ]
})

// 在路由切换时使用pushState()方法更新URL
router.beforeEach((to, from, next) => {
  window.history.pushState(null, null, to.fullPath)
  next()
})

在上面的代码中，我们首先使用Vue Router创建了一个路由实例，并将mode设置为history模式。然后，在路由切换时，我们使用beforeEach()方法来监听路由切换事件，在切换时使用pushState()方法更新URL。这样，在页面刷新时，浏览器就会从缓存中加载页面，而不会向服务器发送请求，从而解决了路由页面刷新404的问题。

注意：使用History API需要注意浏览器兼容性问题，尤其是在IE浏览器中的兼容性。同时，还需要在服务器端配置fallback路由，以防止用户手动输入URL时出现404错误。