vue去掉路由中#号

最新推荐文章于 2024-05-05 08:48:00 发布
最新推荐文章于 2024-05-05 08:48:00 发布
阅读量894 收藏 1
点赞数 1
分类专栏： element-ui+vue2 文章标签： Vue Element-UI Vue-Router history模式 前端路由
本文为博主原创文章，未经博主允许请勿转载。
本文链接：https://blog.csdn.net/qq_39704057/article/details/119636620
版权

使用版本

  • "element-ui": "^2.15.3",
  • "vue": "^2.6.11",    
  • "vue-router": "^3.5.2",
  • vue-cli:3

1. 找到路由文件

2. 添加以下代码

mode:'history',

 3. 效果如下

 

兰颜
关注
专栏目录
vue路由上的#/怎么去掉_如何去除vue项目中的 # — vue路由的History模式
weixin_39938331的博客
12-28 937
前言在创建的 router 对象中，如果不配置 mode，就会使用默认的 hash 模式，该模式下会将路径格式化为 #! 开头。添加 mode: 'history' 之后将使用 HTML5 history 模式，该模式下没有 # 前缀，而且可以使用 pushState 和 replaceState 来管理记录。使用vue-cli搭建的环境，在配置好路由之后，可以看到下面的情况：对于vue开发的单页...
vue2路由移除#号（Apache）
侞婼冇罪
02-15 5430
刚回上海，事情挺多的，忙到现在，折腾了一下vue2 vue2移除路由#号基本根据文档来就行了，在路由中设置： mode: 'history', 在开发阶段#就移除了，然后是生产阶段，官方文档也有详细的描述：点击打开链接 根据官方的我在Apache去设置发现还是有问题，以前有折腾过angular1的#：点击打开链接 首先在Apache文件夹中找到 httpd.con
VUE : vue-cli中去掉路由中的井号#操作
10-14
主要介绍了VUE : vue-cli中去掉路由中的井号#操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue去掉路由中的#问题(index.js)
m0_52555753的博客
04-24 373
上述实我修改之后的代码，注意修改两个地方。
vue 路由url中去掉＃
最新发布
敲厉害的燕宝的博客
05-05 784
将createWebHashHistory修改为createWebHistory。
Vue 去除路由路径中的#
xy的博客
08-27 1197
问题 访问路径的时候，会出现#，想去除 ``` import { createRouter, createWebHashHistory } from "vue-router" import Auth from "../views/Auth.vue" // 定义路由 const routers = [{ path:"/", redirect:"/auth" },{ ...
vue 路由地址把#去掉
老段的CSDN的博客
08-15 1009
想把端口号8000换成其他的 比如我这样的3000。在路由对象里边添加history模式就不显示#
详解如何去除vue项目中的#——History模式
11-26
使用vue-cli搭建的环境，在配置好路由之后，可以看到下面的情况：   但是不难发现#的出现真的很丑陋，并且也不知道这是什么作用？ 所以就去Stack Overflow上搜索了，果然还有~ 看来Stack Overflow是真的强大，你在...
vue 路由去掉#之后的配置
weixin_42910765的博客
10-09 523
const router = new Router({ mode: 'history', //去掉url中的# routes: [] --------- NGINX中 VUE路由去掉#后的配置问题 location =/ { rewrite index.html permanent; try_files $uri $uri/ /index.html; } 具体可查看 另一个 ...
vue去除路由上的 # 号
夜伴钟声丶的博客
04-04 1303
vue去除路由上的 # 号（vue 2.0+） 经常做vue的童鞋应该都了解 项目打开之后都会有一个很坑的地方 那就是路由上的那个# 这是一个不稳定因素 很多地方都会受影响，经过一番探索，在这里记录一下踩坑日记 一、前端修改 打开/router/index.js，在里面添加mode:‘history’， 需要详细了解history模式的童鞋可以看一下官方文档 history模式 export d...
vue里面怎么删除部分页面_如何去除vue项目中的 # --- History模式
weixin_39784972的博客
12-19 527
使用vue-cli搭建的环境，在配置好路由之后，可以看到下面的情况：但是不难发现#的出现真的很丑陋，并且也不知道这是什么作用？所以就去Stack Overflow上搜索了，果然还有~ 看来Stack Overflow是真的强大，你在项目中遇到的问题实际上在so上都已经被问过并且解决了，这不：这是最高票的回答，即在vue2中将mode模式设置为history，试过之后确实奏效！但是知道这样可以解决...
vue路由去除#
技术博客记录
01-11 395
import Vue from 'vue' import Router from 'vue-router' import activity from '@/components/activity.vue' import ranking from '@/components/ranking.vue' Vue.use(Router) export default new Router({ mode: 'history', routes: [{ path: '/', name: 'a
如何去掉vue路由中的#
weixin_33743880的博客
09-26 186
通过脚手架vue-cli构建的项目，在项目启动后，URL地址上都会带有#，如：http://localhost:8080/#/father 原因：这是因为vue-router默认hash模式，使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。 因为对于正常的页面来说，更换url一定是会导致页面的更换的， 而只有更换url中的查询字符串和h...
vue路由去掉#
LPLIFE的博客
07-18 1232
添加： mode: 'history', export default new Router({ mode: 'history', routes: [ { path: '/', name: 'HelloWorld', component: HelloWorld } ] })
vue 去除路由时候的#
长门有希的博客
05-21 348
nginx 配置 try_files $uri $uri/ /index.html =404;
HTML5 History模式，vue路由去除#
qq_40547061的博客
03-26 255
参考来源：jigsaw vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。 项目后期需要去除#，则可以采用history模式，这种模式利用 history.pushState API 来完成 URL 跳转且无须重新加载页面。 不过这种模式还需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台...
如何去掉vue路径中的“#”号
baby_dewo的博客
10-12 6329
如何去掉vue路径中的“#”号 我们在vue项目中使用vue-router时，路径中会有 # 号，这样看着也不舒服。其实是因为路由有两种模式 hash 和 history，我们平时直接使用的是默认的hash，所以路径会有 # 号，因此我们只需要修改成 history 就可以了，如下图： laravel框架后台配置 在web.php里添加路由： Route::get(’/{all}’, function () { return view(‘welcome’); })->where([‘all’ =&g
vue2、vue3里面去掉访问地址中路由‘#‘号--nginx配置
qq_44552416的博客
01-10 4936
如果浏览器支持History API，那么就可以使用history.pushState()和history.replaceState()方法来更新浏览器的URL路径，从而可以实现前端路由，而不用像传统的多页面应用一样每次都请求服务器获取新的HTML页面。我们在vue2中，默认情况下出现#号的，是因为Vue 的 router 默认是 hash 模式，在 hash 模式下，是会有#号在URL上；在 router 的 index.js 页面内，mode 默认是 hash，修改为 history。
vue路径中去除#
lpfasd123的博客
07-16 8927
vue使用vue-router时，路径中会有#的字段，是应为打包完成之后，项目为单页面项目，所有的url都指向单个页面，#号之后的路径是指该页面的锚定位置，所以router中的路径是无法加载的。若想去除#，就需要使用router的history模式， 且在服务器端进行配置 import Vue from 'vue' import Router from '...
vue不要让路由出现#，如何设置
06-01
如果你使用的是 Vue Router，可以通过在创建 router 实例时传入 `mode: 'history'` 选项来将路由模式设置为 HTML5 History 模式，从而去掉 URL 中的 `#`。 例如，你可以在 `src/main.js` 文件中这样创建 router ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值