关于Vue项目路由栏去除“#”的处理方法及其刷新页面时出现404问题

最新推荐文章于 2024-01-18 15:49:19 发布
置顶 最新推荐文章于 2024-01-18 15:49:19 发布
阅读量4.3k 收藏
点赞数 1
分类专栏： 日常问题 文章标签： Vue 路由 404 # 刷新
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37319220/article/details/79742209
版权

  如下图所示： 在实例化路由模块时，添加mode属性  为‘history’，这样地址栏的“#”号就会消失。

        缺点：这种模式下，跳转页面是不会出现问题的，但是当刷新页面是就会出现404，这时候就需要server端的配合，当页面为404时默认指向index.html，这点可以查看官网文档说明


been_7
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
浅谈vue项目,访问路径#号的问题
10-14
Vue Router是Vue.js官方提供的路由管理器，它帮助我们在单页面应用程序（SPA）中实现页面导航。 在默认的"hash"模式下，Vue Router利用URL的哈希（#）部分来跟踪路由变化。这是因为浏览器的特性决定的，URL的哈希...
解决vue打包项目后刷新404的问题
11-26
vue打包项目后刷新404的问题Nginx配置 server { listen 80; server_name localhost; index index.html; root /root/dist; location / { root /root/dist; try_files $uri $uri/ /index.html =404; } } 以上这篇解决vue打包项目后刷新404的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
vue2、vue3里面去掉访问地址中路由‘#‘号--nginx配置
qq_44552416的博客
01-10 4096
如果浏览器支持History API，那么就可以使用history.pushState()和history.replaceState()方法来更新浏览器的URL路径，从而可以实现前端路由，而不用像传统的多页面应用一样每次都请求服务器获取新的HTML页面。我们在vue2中，默认情况下出现#号的，是因为Vue 的 router 默认是 hash 模式，在 hash 模式下，是会有#号在URL上；在 router 的 index.js 页面内，mode 默认是 hash，修改为 history。
vue下使用nginx刷新页面404的问题解决
10-16
主要介绍了vue下使用nginx刷新页面404的问题解决,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
Vue3去除#后，刷新页面出现404
taowen0315的博客
12-06 402
设置history模式去除# 配置nginx，防止刷新后出现404
vue去路由的#以及刷新404
moliyiran的专栏
01-30 302
首先，去#直接在路由加: export default new Router({ mode: 'history', //去掉url中的# routes: [ { path: '/', name: 'Index', component: Index }, { path: '/stars', name: '...
Vue如何去掉#方法,刷新404报错问题
PariyPeng
10-27 2431
问题 ：Vue如何去掉#方法,刷新404报错问题，采用的是IIS部署 背景 开发语言：.NETCORE 部署环境:IIS 项目结构：前后端分离即WEBAPI webapi相信大家都是前端内容展示页一个端口，api访问一人上端口，但由于用户给的只有一个域名，没有多余的入口。这就折腾到人了。 实现步骤 首先得让大家知道发布的目录，说一堆文字不如一张图 。wwwroot所放的文件为前端内容展示页，admin为后台管理前端，至于发布目录下就是webapi文件了。如下图： 前端修改部分 vue.
vue动态路由刷新页面显示404页面问题解决
fationopen的博客
06-27 3754
vue动态路由刷新页面 显示404页面 问题解决
vue 项目中当访问路由不存在的时候默认访问404页面操作
10-14
在Vue项目开发中，为访问的路由不存在或错误时，提供一个默认的404错误页面是非常有必要的。这不仅能提高用户体验，还能够维护网站的友好性和可访问性。一个良好的错误页面能够帮助用户理解他们在哪个环节出了问题，...
在vue中实现某一些路由页面隐藏导航栏的功能操作
10-14
在Vue.js应用中，我们经常需要...总结起来，本文详细阐述了在Vue中隐藏某些路由页面的导航栏以及保持路由刷新后菜单项激活状态的方法。理解并掌握这些技巧，有助于我们更好地构建具有动态导航和局部刷新功能的Vue应用。
vue相同路由跳转强制刷新该路由组件操作
10-14
在Vue.js应用中，路由是页面之间导航的关键。然而，有时开发者可能会遇到一种情况，即在同一个路由下，需要在用户再次点击菜单时强制刷新组件，以确保组件的状态被重置。Vue Router，Vue.js的官方路由管理器，提供了...
vue项目地址栏中去除# 打包部署成vueHistory模式刷新后404如何配置nginx服务
weixin_42599091的博客
04-30 828
vue项目去除# 在router文件夹下的index.js中的router实例中添加mode属性，值设置为history export default new Router({ mode:"history",//去除哈希值的#号 routes }) 使用这种模式需要后端的配合，如果没有后端的配合在打包的时候页面会是空白或者刷新404。一般还是使用hash模式 后台nginx服务...
vue 配置，url不显示 ‘ # ’
欢迎所有人，批评指正！
09-29 2004
如果你觉得url里面有#很丑，就修改一下吧！ 首先，你需要在router/index.js 中添加 mode:'history', 这种配置在本地测试可以，但是放到生产你会发现，通过路径访问会出现404页面！ 我的是通过Nginx代理的，所以我说下，我Nginx的配置 try_files $uri $uri/ /index.html; ...
Vue项目服务器部署刷新页面404问题及解决
IChen.的博客
10-23 5910
因为在vue项目开发的时候是访问自己的8080服务器,后端有进行处理，在刷新界面后找不到相对路径时，会重新渲染index.html界面，把路由的控制权交给前端，然后前端负责路由的匹配，在找到符合/jichu /123 这种格式的路由后,就会匹配成功。vue router mode 默认为hsas，这样的url中会带有#，如果改成mode:'history’就能去掉#号，也可以正常访问，但是再次刷新你页面就会出现404。因为网页上显示的是静态绝对路径，而实际上服务器上是没有改路径的，多以导致刷新汇报错误。
VUE路由跳转地址栏重复，页面刷新404问题汇总
最新发布
qq_25796879的博客
01-18 738
2.服务部署后刷新404，检查nginx代理，检查vue.config.js中的publicPath是否正确。2.检索router.push()方法，push(path)调整为push(name:‘路由name’)1.本地开发刷新404，检查是否有用document.location.href做路由跳转。例如：https://xxxx.xxx.xxx/#/1234/#/1234。1.首先排查是否有初始化做拦截，比如检查用户是否有效，做了路由处理，
VUE路由去掉“#”
g2526的博客
09-21 2481
问题：今天做项目优化 发现地址栏带了个#号，觉得有点丑，想要去掉 解决方法：在路由文件把mode改为history,原来是hash,果然解决掉了 带#号的问题。 但是又发现个新问题，在根目录引入的静态文件 是没有问题的，但是在子页面引用的静态文件就会有问题，引入静态文件是加个@号引入。 同样的引入方式同样的文件，home页是能加载出来的，子页面就加载不出来，然后度娘找了下答案，原来是因为hash模式下,根路径是不会变的，但是使用history模式后，根路径就不固定了。 那么这种引入方式就不可
Vue 在页面中手动刷新后路由前会加上/
X_Flandre的博客
07-21 1460
可以看到,setItem方法中每次存储数据都会转换成JSON格式的字符串 图片: https://uploader.shimo.im/f/AaVR4oum2g6j8Jeo.png?accessToken=eyJhbGciOiJIUzI1NiIsImtpZCI6ImRlZmF1bHQiLCJ0eXAiOiJKV1QifQ.eyJhdWQiOiJhY2Nlc3NfcmVzb3VyY2UiLCJleHAiOjE2MjY4NDc3NjgsImciOiJXWXB2VDZ0aHdoeVBnS1h2IiwiaWF0Ijo
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值