Vue路由模式切换成history

已于 2024-04-15 14:59:04 修改
阅读量665 收藏 1
点赞数
文章标签： vue.js javascript 前端
于 2022-08-12 16:03:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_61828394/article/details/126305886
版权
本文介绍如何将Vue项目的路由模式从默认模式切换到history模式。主要内容包括：1. 更改路由模式为history；2. 调整base路径以适应项目部署的实际路径；3. 修改打包路径以确保正确的资源引用。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

Vue路由模式切换成history

  1. 更改模式为history
    在这里插入图片描述
  2. 更改base（根据自己项目路径更改）
    在这里插入图片描述
    3.更改打包路径
    在这里插入图片描述
m0_61828394
关注
Vue路由模式
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
09-25 1034
然而，这需要服务器的配合，因为它需要正确的配置来返回 index.html 页面，以便 Vue Router 可以接管路由逻辑。在 hash 模式下，URL 的 hash 部分（# 符号后面的部分）被用来表示当前路由的位置。因此，在没有服务器端支持的情况下，hash 模式是一个简单易用的选择。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。的地址时，Vue Router 会根据 hash 值来匹配相应的路由规则，并渲染对应的组件。
前端学习（2170）：路由的默认值和修改为history模式
歌谣的博客
09-14 326
index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>learnvuerouter</title> </head> <body> &..
vue vue-Router默认hash模式修改为history需要做的修改详解
10-18
今天小编就为大家分享一篇vue vue-Router默认hash模式修改为history需要做的修改详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue-router 将默认的哈西模式改为history模式
秋来九月八
11-05 3392
主要用于非浏览器环境，如服务器端渲染（SSR）或 Electron 等桌面应用。不涉及浏览器 URL，而是直接操作路由历史栈。});默认情况下，Vue Router 使用哈希模式（Hash Mode），因此如果你不显式指定模式，应用程序将使用哈希路由。根据你的项目需求和服务器配置，你可以选择使用哈希模式或历史模式。当使用历史模式时，请确保服务器正确处理路由，以避免刷新或直接访问 URL 时出现 404 错误。
48. 配置使用VUE - router 路由 和 修改路由模式为 histroy
Bi-Hu的博客
08-11 1453
使用路由大概步骤： 1.新建一个包含路由组件的vue项目，当然你也可以用命令安装： 命令安装路由【个人推荐直接新建脚手架的时候选中即可】： npm install vue-router --save 2.在模块化工程中使用它(因为是一个插件, 所以可以通过Vue.use()来安装路由功能) 导入路由对象，并且调用 Vue.use(VueRouter) -> 创建路由实例，并...
vue2和vue3中vue-router从默认模式切换为history模式
HOMEXS的博客
03-03 2607
1.vue-router从默认模式切换为history模式 为什么要切换vue-router的默认模式location为history模式呢？这是因为默认的location模式的url里面localhost:8080后面会接一个/* 而history模式下的url里面localhost:8080后面则没有/*，更加美观和更加符合url的规则 解释完为什么vue-router中要切换history模式后下面教我的方法吧 第一步：更换router文件夹下的index.js文件里的默认导入的函数create
Vue3.0路由将哈希(hash)更改为历史(history)模式
IU
04-03 1885
Vue3.0路由将哈希(hash)更改为历史(history)模式
Vue下路由History模式打包后页面空白的解决方法
12-09
Vue.js 是一款流行的前端框架，它的路由管理器 Vue Router 提供了两种主要的路由模式：Hash 模式和 History 模式。这两种模式各有优缺点，适用于不同的应用场景。 Hash 模式是 Vue Router 默认采用的方式，它通过 ...
详解Vue路由History mode模式中页面无法渲染的原因及解决
08-29
Vue.js 的路由管理器 vue-router 提供了两种主要的导航守卫模式：Hash 模式和 History 模式。在本文中，我们将深入探讨 History 模式的细节，以及在使用过程中遇到的页面无法渲染和 404 错误的问题及其解决方案。 1...
VUE的history模式下除了index外其他路由404报错解决办法
12-10
我们先来看下代码： location / { ... root /dist; ... } try_files首先会判断他是文件，还是一个目录，...vue-router 默认是hash模式，使用url的hash来模拟一个完整的url，当url改变的时候，页面不会重新加载。但是如果我
vue-router路由模式设置history模式
weixin_42864357的博客
03-29 1349
vue-router路由模式设置history模式。
vue =＞ vue项目打包上线工作
Write less，do more
03-17 385
打包之前的路由模式 **目标**配置打包之前的路由模式 在SPA单页应用中，有两种路由模式 hash模式 ： #后面是路由路径，特点是前端访问，#后面的变化不会经过服务器 history模式：正常的/访问模式，特点是后端访问，任意地址的变化都会访问服务器 开发到现在，我们一直都在用hash模式，打包我们尝试用history模式 改成history模式非常简单，只需要将路由的mode类型改成history即可 const createRouter = () => new Router({ m
vue路由history模式
liuxuanwei1998的博客
07-12 1166
1
vue路由从hash模式切换到history模式
weixin_45018314的博客
07-16 1866
由于微信登录的限制不得不把hash模式更换为history模式 vue-router 在router.js下增加mode字段，如果部署环境不为根目录，需要添加base属性，填写服务器的路径（.com后路径） home/index为vue-router中路由 打包路径也需要修改为对应的前缀，否则访问不到对应的资源 vue.config.jsz 注意！！！！！！：base值路径两侧必须加 / ...
Vue 项目中 history 路由模式的使用
最新发布
lwaner的博客
07-10 1441
在最近帮客户开发的一个项目中，由于项目的特殊性，需要用到 Vue 中的 history路由模式。该模式使用时会涉及到“上传白屏”和“刷新 404 问题”。在帮助客户解决这两个问题的过程中，总结问题的解决方案并记录下来，希望能够保留这篇文档，以备将来遇到同样问题可以顺利解决。
vue默认路由改成history 模式 和后端路由统一 nuxt 就是这样做的
gwdgwd123的博客
06-27 3328
vue 路由history模式 2018-07-25 14:47:00weixin_34409822阅读数16 vue路由的模式默认是hash的，url上会带有#号，路由在#号后面 如：http://api.51app.cn/gamepage/index.html#/index 在百度统计的时候把#后面的去掉了，就没有统计到具体的页面，并且这样很不美观，希望改成这样http://api....
介绍Vue router的history模式以及如何配置history模式
热门推荐
m0_62396648的博客
07-08 1万+
history模式使用浏览器的history API来管理路由状态，而不是依赖于URL中的哈希。在history模式下，URL看起来更加整洁，没有#符号。例如，history模式可以在不刷新整个页面的情况下，通过改变URL来切换页面，实现更加流畅的用户体验。
vue-router base选项和路由hash与history模式。
cccqd的博客
04-29 5107
base 选项的默认值为 “/”， 1.当想要一个域名运行多个项目的时候，这时候需要把 const router = new VueRouter({ base:'xinwen2', routes, }) 里面的base值是代表我们项目的名称，可以随意起， 2.接下来将vue.config当中添加 const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({ transpil
Nginx服务器下VUE history模式子路由刷新404的问题
denga00的博客
04-05 473
Nginx服务器下VUE history模式子路由刷新404的问题环境、情况解决办法 环境、情况 我是使用宝塔面板生成的服务器，默认的Nginx。 由于遇到了这个在子路由刷新就404的问题，故此我就开始了漫长的百度中。网上的答案比较多，其实大部分都是对的，但是都没讲清楚是在哪修改Nginx配置文件，我一直以为是全局的Nginx配置文件，但其实并不是，是单个网页的Nginx配置文件。 废了我好多时间，可能这就是小白的痛吧！ 写下这篇文章帮助后来的小白跳坑。 解决办法 如图， 1、宝塔面板点击网站 2、点击你
前端路由解析：Vue-Router的Hash与History模式
"本文主要介绍了前端路由的两种主要实现方式：Hash路由和History路由，并探讨了它们的工作原理以及如何在实际应用中实现简单的前端路由。文章还提到了Vue.js框架中的vue-router，作为实现前端路由的工具。" 前端...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值