vue路由：hash模式下跳转404的问题。

路小雨的雨web

已于 2024-06-14 15:11:14 修改

阅读量989

点赞数 2

CC 4.0 BY-SA版权

分类专栏： vue vueRouter #日常踩坑文章标签： vue.js 哈希算法 javascript

于 2024-06-14 15:08:43 首次发布

本文链接：https://blog.csdn.net/fang_java/article/details/139680132

vue的路由模式：hash和history。

最近有个问题，其实很常见就是hash模式跳转404。

发生问题的场景：

1.项目加载的动态路由。

2.首页和登录页在一个动态路由模块，而其他的管理层页面模块在另外一个动态路由模块。按需加载（就是根据传递的关键字动态加载不同的路由模块）。

3.问题的产生：登录后跳转home首页正常，点击跳转管理层页面（新打开浏览器窗口）。这时管理层页面编写<a></a>标签：<a href="/#/home">，跳转首页为404。

分析原因：

1.没有动态加载到home的动态路由，找不到路由，因此跳转404。

2.hash模式下页面不刷新，因此不会重新加载动态路由。

解决方案：

a标签href的跳转换成@click，跳转后强制刷新当前页面。

衍生问题：在点击浏览器自带的回退上一步的按钮时候又跳转到404了。

原因：hash模式跳转后会记录上次浏览器的访问记录。因此是404。

衍生问题的解决方案：

1.在需要监听处理回退上一步的页面定义返回方法：例：goBack(){};

2.在需要处理自定义返回的页面中添加监听事件

onBeforeMount(() => {
    if (window.history && window.history.pushState) {
        // 向历史记录中插入返回上一步的页面
        history.pushState(null, null, location.href)
        window.addEventL

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

路小雨的雨web

关注关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Vue路由刷新时出现404问题的解决方案

ByteWhisper的博客

08-16

7953

这样，当在浏览器中刷新页面时，服务器会返回index.html，并由Vue Router来处理相应的路由逻辑。具体做法是，在路由跳转时使用history.pushState来修改URL，使其对应到正确的路由路径。然而，当用户手动刷新页面或直接输入某个路由地址时，由于服务器并没有为该路由提供相应的资源，就会导致404错误。根据具体情况选择适合的解决方案，可以有效地解决路由刷新时的404问题，并提升用户体验。当我们将项目部署到服务器的子目录时，配置正确的基本路径可以避免路由刷新时出现404问题。

vue路由从入门到进阶 --- 路由重定向与404等问题

共同学习，共同成长

05-30

1634

本文讲解vue路由的【路由404问题】【路由模式设置】【路由重定向】等内容，并结合具体案例让小伙伴们深入理解，彻底掌握！

参与评论您还未登录，请先登录后发表或查看评论

Nginx与history路由模式：刷新页面404问题

席木木的博客

02-08

6871

Nginx与history路由模式：刷新页面404问题，通过nginx服务端配置解决

vue-router的history路由模式，跳转路由后出现404页面或者跳转到了网站首页

dsadada23的博客

09-04

385

摘要：本文解决了Vue项目中使用history路由模式时出现的404页面或跳转首页问题。通过对比hash和history模式，提供了Vue3项目(vite+vue-router4)的配置方案：1)router配置base路径；2)vite设置base路径；3)Nginx服务器添加try_files规则，确保刷新和路由跳转正常。最终实现了美观的URL且避免404错误。

vue-router 4.0 动态路由会跳转到 404 页面的问题

纯爱枫若情的博客

07-10

8077

当然以上的代码只适用于我们文章一开始假设的场景，真实的业务场景中，应该会有更多更复杂的情况，但是万变不离其宗，只要理清了思路，掌握了原理，找到了应对方案，再复杂的场景也能一步步抽丝剥茧，应付起来将会游刃有余。所以，我们就会借用，router 提供的一些列的生命周期函数，来帮助我们确保，当用户信息存在的时候，能自动添加我们的动态路由。一种场景是，当用户未登录，这时候，也没有 vip 这个路由的存在，那么路由匹配不到，会直接被。为了用户体验的友好性，我们不可能让用户每次用我们的页面的时候，都先执行一遍登录。

vue-element-admin vue设置动态路由刷新页面后出现跳转404页面Bug 解决方法

laosao_66的博客

04-22

4590

在使用的过程中，加入权限模块后，刷新后权限控制的页面就默认跳转到404页面了，原因是权限控制的路由模块是动态添加进去的，而我的404监听路由是在默认路由里面的，优先级比动态路由要高，所以刷新后默认先被404接管了，改一下，把404监听路由注释掉需要手动在动态路由加载后，再把通配路由加上去，所以有了解决方法二。这个bug的具体情况是：设置了动态路由之后，不同的用户登录之后显示了不同的侧边栏，在侧边栏点击菜单，渲染对应路由页面没有任何问题，但是在。（这种情况只出现在动态路由上，静态路由刷新没问题）。

Vue进阶（八十五）：vue-router Hash模式跳转及懒加载

IT全栈华强工作室

11-27

3226

vue-router路由的原理是通过改变网址,来实现页面的局部刷新,相比a标签跳转的不同之处在于：路由跳转不需要刷新整个页面。大概流程可以看成: 浏览器发出请求服务器监听到端口有请求过来,并解析url路径根据服务器的路由配置,返回相应的信息(可以是HTML字符串、也可以是json数据、图片等等) 浏览器根据数据包的 Content-type 来决定如何解析数据简单来说路由就是用来跟后端...

vue hash模式下页面跳转用this.$router.push({ path: ‘/‘ })

宁

10-22

2177

hash模式下，vue页面跳转： this.$router.push({ path: '/' }) // 不带参数跳转 this.$router.push({ path: '/', query: { id: row.id } }) // 带参数跳转

VUE的history模式下除了index外其他路由404报错解决办法

12-10

我们先来看下代码： location / { ... root /dist; ... } try_files首先会判断他是文件，还是一个目录，...vue-router 默认是hash模式，使用url的hash来模拟一个完整的url，当url改变的时候，页面不会重新加载。但是如果我

Vue路由这么玩，让你的网页嗖嗖跳转

唯见青山不见君

07-05

1007

Vue路由这么玩，让你的网页嗖嗖跳转

基于vue hash模式微信分享#号的解决

10-14

总结，解决Vue Hash模式下微信分享`#`号问题的核心在于正确配置微信JSSDK，并在分享链接中手动拼接`#`号及其后的路由信息。同时，对于微信内视频播放的优化，可以通过调整特定属性来改善用户体验。理解并掌握这些...

单页面路由跳转之hash模式

TomHe789

10-30

516

模式主要通过监听URL地址的哈希值的变化来实现页面更新。

解决Vue应用中遇到路由刷新后出现 404 错误

twins3520的博客

10-05

2283

Vue 应用中遇到路由刷新后出现 404 错误，通常是因为 Vue 应用是个单页应用（SPA），它通过 Vue Router 管理路由，通过 HTML5 History Mode 实现页面导航无需重新加载页面。使用 Hash Mode：另一种方法是使用 Vue Router 的 Hash Mode，它不需要服务器端的特别配置。选择合适的方法进行配置，即可解决 Vue 应用在路由刷新时出现的 404 错误。服务器配置：需要配置服务器，使其可以正确处理所有路由请求，并返回同一个。

Vue路由hash改history模式刷新居然404？

mbrains的博客

12-27

1314

Vue路由hash改history模式刷新404

vue中hash模式下锚点多页面跳转

m0_58959716的博客

09-06

651

1.目标页面设置锚点及跳转事件 <pid="demoAnchor">直播时间：2021年10月20日</p> methods：{ open(){ window.location.href='#demoAnchor'; } }, mounted(){ if(this.$route.query.active){ this.open(); } 2.准备跳转页面，设置跳转，...

Vue的路由模式和跳转方式

weixin_48065262的博客

03-10

736

一、路由跳转方式 push跳转 <router-link to="路由"></router-link> - 相当于调用了router.push()方法，这个值可以是一个字符串或者是描述目标位置的对象 - 表示添加一个路由，会产生历史记录，页面跳转之后可以通过后退按钮返回 replace跳转 <router-link to="路由" replace></router-link> - 相对于调用了router.replace()方法，这个值可以

vue用户访问不存在的页面跳转404怎么实现

肥晨开发的学习之路

03-12

770

这段代码的主要作用是：当用户访问任何未匹配的路径时（例如访问一个不存在的页面），Vue 会加载并显示404.vue页面。通常，这个页面会显示一个“404 - 页面未找到”的提示信息，帮助用户了解当前访问的页面不存在。

vue路由跳转

weixin_53003063的博客

02-11

367

官方解释：Vue Router 是Vue.js的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。路由的两种模式 hash&histroy hash：路由的默认模式，路径中带‘#’，不符合开发规范，刷新时会跳转到对应的与hash值匹配的页面，可以兼容低版本浏览器和IE histroy：路径URL中不带‘#’号，符合开发规范，刷新页面如果没有配置的话会跳转404，需要与之配置对应的页面，支持新开发的api 路由的跳转方式 1.不带参 <..

Vue入门十、路由跳转（哈希模式）

weixin_34261739的博客

05-29

2782

单页一应用的路由模式有再种1、哈希模式（利用hashchange事件监听url的hash的改变）window.addEventListener("hashchange", function (e) {console.log(e)})2、history模式 <!DOCTYPE html> <html lang="en"> <head> <meta c...

vue3的hash路由模式下路由跳转

最新发布

09-11

在 Vue 3 的 hash 路由模式下，有多种路由跳转方法： ### 编程式导航在 Vue 3 中使用 `vue-router` 时，可以通过 `useRouter` 组合式函数来获取路由实例，进而使用编程式导航方法进行路由跳转。以下是一些常见的编程式导航方法： #### `router.push` 用于导航到一个新的路由，它会向历史记录添加一个新的条目，就像用户点击了浏览器的前进按钮一样。 ```vue <template> <button @click="goToHome">Go to Home</button> </template> <script setup> import { useRouter } from 'vue-router'; const router = useRouter(); const goToHome = () => { router.push('/home'); }; </script> ``` #### `router.replace` 与 `router.push` 类似，但是它不会向历史记录添加新条目，而是替换掉当前的历史记录，就像用户点击了浏览器的“替换当前页面”操作。 ```vue <template> <button @click="replaceToHome">Replace to Home</button> </template> <script setup> import { useRouter } from 'vue-router'; const router = useRouter(); const replaceToHome = () => { router.replace('/home'); }; </script> ``` #### `router.go` 用于在历史记录中向前或向后移动指定的步数。正数表示向前移动，负数表示向后移动。 ```vue <template> <button @click="goBack">Go Back</button> <button @click="goForward">Go Forward</button> </template> <script setup> import { useRouter } from 'vue-router'; const router = useRouter(); const goBack = () => { router.go(-1); }; const goForward = () => { router.go(1); }; </script> ``` ### 声明式导航可以使用 `<router-link>` 组件进行声明式导航，它会渲染成一个 `<a>` 标签，点击时会触发路由跳转。 ```vue <template> <router-link to="/home">Go to Home</router-link> </template> ``` ### 新窗口打开路由页面如果需要在新窗口中打开路由页面，可以对 `window.open()` 方法进行封装，模仿 `router.push()` 的跳转风格。例如： ```javascript const openInNewWindow = (path) => { const baseUrl = window.location.origin; const fullUrl = `${baseUrl}/#${path}`; window.open(fullUrl, '_blank'); }; ``` ```vue <template> <button @click="openHomeInNewWindow">Open Home in New Window</button> </template> <script setup> const openHomeInNewWindow = () => { openInNewWindow('/home'); }; </script> ``` ### hash 路由原理 Hash 方法是在路由中带有一个 `#`，主要原理是通过监听 `#` 后的 URL 路径标识符的更改而触发的浏览器 `hashchange` 事件，然后通过获取 `location.hash` 得到当前的路径标识符，再进行一些路由跳转的操作。相关属性如下： - `location.href`：返回完整的 URL。 - `location.hash`：返回 URL 的锚部分。 - `location.pathname`：返回 URL 路径名 [^4]。