vue 项目如何去掉url中的#号

最新推荐文章于 2024-05-05 08:48:00 发布
最新推荐文章于 2024-05-05 08:48:00 发布
阅读量1.2k 收藏 1
点赞数 3
分类专栏： ngnix 文章标签： elementui npm 前端 前端框架 webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34530690/article/details/119540318
版权

1.修改router=>index.js中的尾部生成路由的配置 mode:'history'

 2.在开发中环境中你会发现一切正常，但是在生产环境，一刷新会出现404的错误，如果你是在本机运行，则修改路由配置即可，这里以phpstduy_pro为例：路由规则修改为:

location / {

try_files $uri $uri/ /index.html;

}

 3.在生产环境中，Ngnix配置我们可以这样配置：

location / {

try_files $uri $uri/ /index.html;

}

 配置完记得重启Ngnix，完美运行

阿__杰
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue中的uri_vue路径Url带/#/去除方法
weixin_39526564的博客
12-19 671
在router->index.js中mode类型默认为hash，修改为historyconst router = new vueRouter({mode: 'history',routes: [...]})除此之外，需要服务端配合，主要因为这种模式利用history.pushState API 来完成 URL 跳转而无须重新加载页面。当刷新页面的时候就会404了。后端配置例子ApacheRe...
Vue去掉地址栏URL里的#
u013573560的博客
05-21 2368
问题描述：在使用Vue开发页面时默认请求地址会出现#号，在一些场景中，例如：微信支付时，分享的url作为参数传递，url不能带#号。 http://elevenking.com/shark/#/ 问题解决：vue-router提供了两种模式 hash 模式 vue-router 默认为 hash 模式，当 URL 改变时，页面不会重新加载，只是根据 hash 来更换显示对应的组件，这就是所谓的单页面应用。 history 模式 ​​​​​​​当使用 history 模式时，URL不再出现#号，修改
vue项目去掉URL中的#
热门推荐
sunliyings17的专栏
04-08 1万+
去掉VUE项目路径中难看的#号，所经历的过程，和踩过的坑
vue 输入网址后，url中自动出现井号#，如何去除
weixin_52297371的博客
11-22 1380
vue 输入网址后，url中自动出现井号#，如何去除
vue 路由url中去掉＃
最新发布
敲厉害的燕宝的博客
05-05 354
将createWebHashHistory修改为createWebHistory。
去掉Vue项目启动默认url地址里的#符号
此人很懒，什么都没有写
03-22 4162
问题描述 Vue项目启动的时候浏览器访问地址为http://localhost:8080/#/，想去掉路由地址里面的#符号 解决方法 在new VueRouter里面加上mode: "history"，有两种写法 写法一 const router = new VueRouter({ mode: "history", routes, }); 写法二 当浏览器输入不存在的路由地址时你可以做个重定向，重定向到你想展示给用户的页面，此处就设置如果URL输入错误或者是URL 匹配不到任何静态资源，
浅谈vue项目,访问路径#号的问题
10-14
在Vue项目中，你可能会遇到URL中包含"#/"的情况，这与Vue Router的默认工作模式有关。Vue Router是Vue.js官方提供的路由管理器，它帮助我们在单页面应用程序（SPA）中实现页面导航。 在默认的"hash"模式下，Vue ...
Vue 去除路径中的＃号
08-27
在 Vue 项目中，我们经常会遇到路径中带有＃号的问题，这是因为 Vue Router 默认使用的 Hash 模式导致的。在 Hash 模式下，路由会以＃号开头，例如 `/#/path/to/resource`。这种情况下，URL 中的＃号会带来不少问题...
vue 项目地址去掉 #的方法
10-17
总之，要去掉 Vue 项目的 URL 中的 `#` 符号，需要将 `vue-router` 的模式设置为 `history`，同时配合后端服务器的重写规则配置，确保所有非静态资源请求都被导向 `index.html`。配置完成后，用户将看到更加友好的 ...
详解如何去除vue项目中的#——History模式
11-26
所以就去Stack Overflow上搜索了，果然还有~ 看来Stack Overflow是真的强大，你在项目中遇到的问题实际上在so上都已经被问过并且解决了，这不： 这是最高票的回答，即在vue2中将mode模式设置为history，试过之后...
如何去除vue项目中的#及其ie9兼容性
08-28
"如何去除vue项目中的#及其ie9兼容性" 本篇文章主要介绍了如何去除vue项目中的#及其ie9兼容性，以下是相关知识点的总结： 一、vue项目中的#符号 在vue项目中，默认的路由模式是hash模式，这种模式下，url的变化...
Vue 如何去除 url中的# ?
qq_21013249的博客
11-08 776
在使用vue进行开发的时候我们会发现地址栏上的ip后面会跟着一个#号，如果想去掉这个井号，我们可以在路由上加上 mode: 'history', 即可去掉.
Vue路由中的hash和history模式的区别及原理
愚公的博客
12-03 912
hash模式 优点 兼容性强，兼容性达到了IE8 除发送ajax和资源请求外不会发送其他多余请求 改变#后的路径、不会自动刷新页面 无需服务端进行配合 缺点 访问路径上包含#,不美观 对于需要锚点功能的需求会与当前路由机制发生冲突 重定向操作时，后段无法获取url完整路径。 history模式 优点 符合url地址规范, 不需要#, 使用起来比较美观 可以使用history.state获取完整的路由信息 后端可以获取到完整的路由信息 缺点 兼容性只到IE10 改变url路径后、会
怎么将vue项目中地址上的#号去掉
牵着蜗牛去旅行的博客
05-25 954
<template> <div id="app"> <!-- <keep-alive> <router-view v-if="isRouterAlive"></router-view> </keep-alive> --> <router-view v-if="isRouterShow"></router-view> </div> </tem
vue去掉地址栏上的#号
前端路上坎坎坷坷，总有一天站在顶峰仰望世界！！！
02-19 760
使用vue创建项目,进行使用,地址栏上会有#号,地址栏上的#号是我们在选择路由模式时选择的hash,也是vueroter默认的,我们需要在vuerouter对象里修改为history模式即可 const router = new VueRouter({ mode:'history', routes:router ...
vue如何去除url中的#号
m0_52336986的博客
07-11 2343
vue-router默认使用的是hash模式，在路由加载的时候，项目中的url会自带#。如果不想使用#，可以使用vue-router的另一种模式history。 在文件目录下的 router->index.js中添加mode: 'history',即可 export default new Router({ mode: 'history', routes: [ { path: '/', name: 'HelloWorld', component: H
HTML5 History 模式 去除# （vue路由去除#、常见配置、Tomcat配置）
qq_43951574的博客
06-10 562
前言： vue使用vue-router时，路径中会有#的字段，是应为打包完成之后，项目为单页面项目，所有的url都指向单个页面，#号之后的路径是指该页面的锚定位置，所以router中的路径是无法加载的。 若想去除#，就需要使用router的history模式， 且在服务器端进行配置 核心： const router = new VueRouter({ mode: 'history', routes: [...] }) 官网给出的解决方案： 1.Apache <IfModule mod_rew
vue路由上的#/怎么去掉_如何去掉vue路由中的#
weixin_39830588的博客
12-19 1533
通过脚手架vue-cli构建的项目，在项目启动后，URL地址上都会带有#，如：http://localhost:8080/#/father原因：这是因为vue-router默认hash模式，使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。因为对于正常的页面来说，更换url一定是会导致页面的更换的， 而只有更换url中的查询字符串和hash值得时候...
VUE路由去掉“#”
g2526的博客
09-21 2464
问题：今天做项目优化 发现地址栏带了个#号，觉得有点丑，想要去掉 解决方法：在路由文件把mode改为history,原来是hash,果然解决掉了 带#号的问题。 但是又发现个新问题，在根目录引入的静态文件 是没有问题的，但是在子页面引用的静态文件就会有问题，引入静态文件是加个@号引入。 同样的引入方式同样的文件，home页是能加载出来的，子页面就加载不出来，然后度娘找了下答案，原来是因为hash模式下,根路径是不会变的，但是使用history模式后，根路径就不固定了。 那么这种引入方式就不可
vue项目去掉地址#导致页面无法跳转
05-25
如果你想要去掉 Vue 项目中的地址栏中的 #，可以使用 Vue Router 的 history 模式。 在使用 history 模式前，请先确保你的服务器已经正确地配置了 URL 重写，否则在用户在直接访问项目时会出现 404 错误。 接下来，你需要在 Vue Router 中进行相关配置： ```javascript import { createRouter, createWebHistory } from &#39;vue-router&#39; const router = createRouter({ history: createWebHistory(process.env.BASE_URL), // 使用 history 模式 routes: [ // 路由配置 ] }) ``` 在使用 history 模式后，你需要确保所有的路由都是有效的 URL，否则用户在直接访问该 URL 时会出现 404 错误。所以在编写路由时，应该遵循 RESTful 风格，即将 URL 设计为资源的路径，例如： ```javascript { path: &#39;/users/:id&#39;, component: UserDetail } ``` 这样，用户访问 `/users/1` 就能够正确地显示 `UserDetail` 组件。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值