vue2路由移除#号（Apache）

最新推荐文章于 2024-01-10 17:12:29 发布
原创 最新推荐文章于 2024-01-10 17:12:29 发布 · 5.4k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue

本文介绍了如何在Vue2应用中移除路由的#号，主要针对Apache服务器进行配置。按照官方文档操作后出现问题，作者通过设置Apache的404页面指向index.html以及修改Directory的AllowOverride为all解决了问题。

刚回上海，事情挺多的，忙到现在，折腾了一下vue2


vue2移除路由#号基本根据文档来就行了，在路由中设置：

mode: 'history',


在开发阶段#就移除了，然后是生产阶段，官方文档也有详细的描述：点击打开链接


根据官方的我在Apache去设置发现还是有问题，以前有折腾过angular1的#：点击打开链接


首先在Apache文件夹中找到 httpd.conf 文件

最低0.47元/天 解锁文章

新学期VIP享超值加赠
详解如何去除vue项目中的#——History模式
11-26
使用vue-cli搭建的环境，在配置好路由之后，可以看到下面的情况：    但是不难发现#的出现真的很丑陋，并且也不知道这是什么作用？ 所以就去Stack Overflow上搜索了，果然还有~  看来Stack Overflow是真的强大，你在项目中遇到的问题实际上在so上都已经被问过并且解决了，这不： 　  　　 这是最高票的回答，即在vue2中将mode模式设置为history，试过之后确实奏效！ 但是知道这样可以解决问题，却不知道为什么，这是不行的，　随着连接，我们看到了文档。 所以这篇文章也就是引申到文档的理解了，大家可以直接去看文档。　 对于vue开发的单页面应用，我们在切换不同的
vue项目部署到Apache服务器中遇到的问题解决
10-18
主要介绍了vue项目部署到Apache中遇到的问题解决，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
前端vue2、vue3去掉url路由“ # ”号——nginx配置
热门推荐
编程知识分享，主打前端
08-27 4万+
大家好，我是yma16，本文分享关于vue2、vue3去掉url路由 # 号——nginx配置。html的 hash模式HTML的hash模式指的是URL中的锚点部分（#后面的内容）被用于在单个页面中显示不同的内容，而不是导航到不同的页面。在这个示例中，#about部分是一个锚点，用于在页面上显示关于页面的内容，而不是导航到一个新的页面。在使用hash模式时，可以使用JavaScript监听hashchange事件，以便在锚点改变时执行相应的操作。
vue2.0项目去掉默认链接的#
qq_41395120的博客
05-25 271
修改路由router下的index.js文件 添加mode:'history'
Vue2 VueRouter 路由配置（并设置为history模式，去除#）
HumorChen的博客
06-14 3013
【代码】Vue2 VueRouter 路由配置（并设置为history模式，去除#）
vue 项目地址去掉 #的方法
10-17
在 Vue 应用中，通常会结合 `vue-router` 这个官方路由管理器来处理页面间的导航。`vue-router` 默认使用的是 `hash` 模式，它利用浏览器的 URL hash 来模拟完整的 URL，使得在 URL 变化时，页面不会重新加载，而是...
vue2 404路由
最新发布
08-16
- 引用[5]：讨论了Vue2路由移除#号（使用history模式）时，Apache服务器的配置。 用户的问题明确是关于Vue2的404路由配置，所以我应该专注于引用[1]和[4]，因为它们直接针对Vue2。 关键点： - 在Vue2中，使用Vue ...
vue项目隐藏#
04-30
### Vue 项目隐藏 URL 中的 `#` 号 为了在 Vue 项目中隐藏 URL 中的 `#` 号，可以通过配置 Vue Router 的 HTML5 History 模式实现。这种方式利用了浏览器的 `history.pushState` API 来完成 URL 跳转而不重新加载...
vue去掉路径中的#
06-02
首先，用户的问题是如何移除#号，所以需要确认如何修改VueRouter的配置。根据引用[1]和引用[3]，vue-router的mode属性在Vue Router3中设置为'history'，而在VueRouter4中则是使用createWebHistory函数。用户可能用的...
vue2开发中如何去掉地址栏中的#号
weixin_30509393的博客
08-08 433
在vue项目的开发中，对于新手的我们，进入项目文件夹后，在文件夹 的如图所示位置： 输入cmd调出dos命令窗口，然后开始输入npm run dev命令运行 如图 （红色部分为项目存放路径）按enter键开始启动node服务器 运行成功，然后可以在浏览器中输入localhost:8080(端口号可以自己设置）访问。 这是我们可以看到地址栏中有个#号，可是在实际访问地址的经验...
vue2和vue3去掉地址栏里的#号
qq_55928824的博客
07-13 1815
vue2和vue3去掉地址栏里的#号
vue2、vue3里面去掉访问地址中路由‘#‘号--nginx配置
qq_44552416的博客
01-10 6074
如果浏览器支持History API，那么就可以使用history.pushState()和history.replaceState()方法来更新浏览器的URL路径，从而可以实现前端路由，而不用像传统的多页面应用一样每次都请求服务器获取新的HTML页面。我们在vue2中，默认情况下出现#号的，是因为Vue 的 router 默认是 hash 模式，在 hash 模式下，是会有#号在URL上；在 router 的 index.js 页面内，mode 默认是 hash，修改为 history。
vue2.0去除url中的#/
曾曾曾Sir的博客
04-10 3007
// 例子，自行對應到你項目的代碼 const router = new VueRouter({ routes, mode: 'history', scrollBehavior (to, from, savedPosition) { // 如果你的連結是帶 # 這種 // to.hash 就會有值(值就是連結) // 例如 #3 if (...
vue项目去掉URL中的#
sunliyings17的专栏
04-08 1万+
去掉VUE项目路径中难看的#号，所经历的过程，和踩过的坑
解决vue项目访问地址自动添加#号问题
Feb_ruary的博客
07-25 7909
新建一个vue项目，访问地址url后自动添加#号，很不美观。
关于Vue项目路由栏去除“#”的处理方法及其刷新页面时出现404问题
qq_37319220的博客
03-29 4556
  如下图所示： 在实例化路由模块时，添加mode属性  为‘history’，这样地址栏的“#”号就会消失。        缺点：这种模式下，跳转页面是不会出现问题的，但是当刷新页面是就会出现404，这时候就需要server端的配合，当页面为404时默认指向index.html，这点可以查看官网文档说明...
vue项目中去除#号后相关联的问题
weixin_52094928的博客
08-22 797
vue项目中去除#号后相关联的问题
去除地址栏中的#
浅听记忆的博客
10-11 868
  const router = new VueRouter({ mode: 'history', routes: [...] })  
nginx中 vue路由去掉#后的配置问题
weixin_30587927的博客
09-26 1377
location =/ { rewrite index.html permanent; try_files $uri $uri/ /index.html; } 转载于:https://www.cnblogs.com/jackjo/p/9707034.html
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值