如何避免vue的url中使用hash符号?
目录
1. 安装 Vue Router
2. 配置 Vue Router 使用 history 模式
3. 更新 main.js
4. 配置服务器以支持 history 模式(此处需要仔细测试)
a. Nginx 配置
b. Apache 配置
5. 部署并测试
总结

在 Vue.js 项目中,避免 URL 中出现 # 符号的方法是使用 Vue Router 的 history 模式。默认情况下,Vue Router 使用 hash 模式,这会在 URL 中添加一个 # 符号,例如 http://www.sqlynx.com/#/home。
通过切换到 history 模式,可以实现更友好的 URL 结构,如 http://www.sqlynx.com/home。
以下是详细的步骤:
1. 安装 Vue Router
如果还没有安装 Vue Router,可以通过以下命令进行安装:
npm install vue-router
2. 配置 Vue Router 使用 history 模式
在 Vue 项目的 src 目录下,找到或创建 router/index.js 文件,并配置 Vue Router 使用 history 模式。
import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/components/Home.vue';
import About from '@/components/About.vue';Vue.use(Router);export default new Router({mode: 'history',routes: [{path: '/',name: 'Home',component: Home},{path: '/about',name: 'About',component: About}]
});
3. 更新 main.js
确保在 main.js 中正确引入并使用路由配置:
import Vue from 'vue';
import App from './App.vue';
import router from './router';Vue.config.productionTip = false;new Vue({router,render: h => h(App)
}).$mount('#app');
4. 配置服务器以支持 history 模式(此处需要仔细测试)
当使用 history 模式时,前端路由需要服务器的支持,因为直接访问嵌套路由时,服务器需要正确地返回 index.html 文件。以下是常见的服务器配置示例:
a. Nginx 配置
在 Nginx 配置文件中添加以下内容:
server {listen 80;server_name yourdomain.com;location / {try_files $uri $uri/ /index.html;}
}
b. Apache 配置
在项目的根目录下创建或更新 .htaccess 文件:
<IfModule mod_rewrite.c>RewriteEngine OnRewriteBase /RewriteRule ^index\.html$ - [L]RewriteCond %{REQUEST_FILENAME} !-fRewriteCond %{REQUEST_FILENAME} !-dRewriteRule . /index.html [L]
</IfModule>
5. 部署并测试
完成以上配置后,将项目部署到服务器,并通过访问不同路由来测试是否一切正常。
例如,访问 http://localhost:8081/home/sql 应该能够正确加载 /home/sql组件而不会出现 # 符号(此处是本地的环境)。

总结
通过使用 Vue Router 的 history 模式和适当配置服务器,可以避免 URL 中出现 # 符号,从而获得更友好、更美观的 URL 结构。
这不仅改善了用户体验,还有助于 SEO 优化。
相关文章:
如何避免vue的url中使用hash符号?
目录 1. 安装 Vue Router 2. 配置 Vue Router 使用 history 模式 3. 更新 main.js 4. 配置服务器以支持 history 模式(此处需要仔细测试) a. Nginx 配置 b. Apache 配置 5. 部署并测试 总结 在 Vue.js 项目中,避免 URL 中出现 # 符号的…...
Java学习 - MySQL存储过程、函数和触发器练习实例
存储过程 存储过程是什么 存储过程是一组已经编译好的SQL语句存储过程优点有什么 安全 性能高 提高代码复用性创建存储过程的语法 DELIMITER $ # 不能加分号CREATE PROCEDURE 存储过程名(IN|OUT|INOUT 参数名 参数类型) BEGIN存储过程语句块 END;$DELIMITER ;创建一个无参的存储…...
【深度神经网络 (DNN)】
深度神经网络 (DNN) 深度神经网络 (DNN) 是机器学习领域中一种强大的工具,它由多层神经元组成,能够学习复杂的数据模式,解决各种任务,如图像识别、语音识别、自然语言处理等。 DNN 的构成: 神经元: DNN 的基本单元&…...
ES全文检索支持繁简和IK分词检索
ES全文检索支持繁简和IK分词检索 1. 前言2. 引入繁简转换插件analysis-stconvert2.1 下载已有作者编译后的包文件2.2 下载源码进行编译2.3 复制解压插件到es安装目录的plugins文件夹下 3. 引入ik分词器插件3.1 已有作者编译后的包文件3.2 只有源代码的版本3.3 安装ik分词插件 4…...
解决Visual Studio Code在Ubuntu上崩溃的问题
解决Visual Studio Code在Ubuntu上崩溃的问题 我正在使用Ubuntu系统,每次打开Visual Studio Code时,只能短暂打开一秒钟,然后就会崩溃。当通过终端使用code --verbose命令启动Visual Studio Code时,出现以下错误信息:…...
【OpenGauss源码学习 —— (ALTER TABLE(SET attribute_option))】
ALTER TABLE(SET attribute_option) ATExecSetOptions 函数 声明:本文的部分内容参考了他人的文章。在编写过程中,我们尊重他人的知识产权和学术成果,力求遵循合理使用原则,并在适用的情况下注明引用来源。…...
Elasticsearch 数据提取 - 最适合这项工作的工具是什么?
作者:来自 Elastic Josh Asres 了解在 Elasticsearch 中为你的搜索用例提取数据的所有不同方式。 对于搜索用例,高效采集和处理来自各种来源的数据的能力至关重要。无论你处理的是 SQL 数据库、CRM 还是任何自定义数据源,选择正确的数据采集…...
‘浔川画板v5.1’即将上线!——浔川python社
1 简介: 浔川画板是一款专业的数字绘画和漫画创作软件,它为艺术家和设计师提供了丰富的绘画工具、色彩管理功能以及易于使用的界面。用户可以使用浔川画板进行手绘风格的绘画、精细的素描、漫画分格、UI设计等多种创作。该软件支持多种笔刷和特效&#…...
RockChip Android12 System之Datetime
一:概述 本文将针对Android12 Settings二级菜单System中Date&time的UI修改进行说明。 二:Date&Time 1、Activity packages/apps/Settings/AndroidManifest.xml <activityandroid:name="Settings$DateTimeSettingsActivity"android:label="@stri…...
详解 ClickHouse 的副本机制
一、简介 副本功能只支持 MergeTree Family 的表引擎,参考文档:https://clickhouse.tech/docs/en/engines/table-engines/mergetree-family/replication/ ClickHouse 副本的目的主要是保障数据的高可用性,即使一台 ClickHouse 节点宕机&#…...
速卖通测评成本低见效快,自养号测评的实操指南,快速积累销量和好评
对于初入速卖通的新卖家而言,销量和评价的积累显得尤为关键。由于新店铺往往难以获得平台活动的青睐,因此流量的获取成为了一大挑战。在这样的背景下,进行产品测评以积累正面的用户反馈和销售记录,成为了提升店铺信誉和吸引潜在顾…...
php反序列化漏洞简介
目录 php序列化和反序列化简介 序列化 反序列化 类中定义的属性 序列化实例 反序列化实例 反序列化漏洞 序列化返回的字符串格式 魔术方法和反序列化利用 绕过wakeup 靶场实战 修复方法 php序列化和反序列化简介 序列化 将对象状态转换为可保持或可传输的格式的…...
力扣随机一题 模拟+字符串
博客主页:誓则盟约系列专栏:IT竞赛 专栏关注博主,后期持续更新系列文章如果有错误感谢请大家批评指出,及时修改感谢大家点赞👍收藏⭐评论✍ 1910.删除一个字符串中所有出现的给定子字符串【中等】 题目: …...
java-正则表达式 1
Java中的正则表达式 1. 正则表达式的基本概念 正则表达式(Regular Expression, regex)是一种用于匹配字符串中字符组合的模式。正则表达式广泛应用于字符串搜索、替换和解析。Java通过java.util.regex包提供了对正则表达式的支持,该包包含两…...
Python xlrd库:读excel表格
💝💝💝欢迎莅临我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:「stormsha的主页」…...
开发中遇到的一个bug
遇到的报错信息是这样的: java: Annotation processing is not supported for module cycles. Please ensure that all modules from cycle [hm-api,hm-common,hm-service] are excluded from annotation processing 翻译过来就是存在循环引用的情况,导…...
Java面试题:对比不同的垃圾收集器(如Serial、Parallel、CMS、G1)及其适用场景
Java虚拟机(JVM)提供了多种垃圾收集器,每种垃圾收集器在性能和适用场景上各有不同。以下是对几种常见垃圾收集器(Serial、Parallel、CMS、G1)的对比及其适用场景的详细介绍: 1. Serial 垃圾收集器 Serial…...
每日一题——冒泡排序
C语言——冒泡排序 冒泡排序练习 前言:CSDN的小伙伴们,大家好!今天我来给大家分享一种解题思想——冒泡排序。 冒泡排序 冒泡法的核心思想:两两相邻的元素进行比较 2.冒泡排序的算法描述如下。 (1)比较相邻的元素。如果第一 个比…...
javascript浏览器对象模型
BOM对象: BOM 是浏览器对象模型的简称。JavaScript 将整个浏览器窗口按照实现的功能不同拆分成若干个对象; 包含:window 对象、history 对象、location 对象和 document 对象等 window对象: 常用方法: 1.prompt();…...
C语言之链表以及单链表的实现
一:链表的引入 1:从数组的缺陷说起 (1)数组有两个缺陷。一个是数组中所有元素类型必须一致,第二是数组的元素个数必须事先指定并且一旦指定后不能更改 (2)如何解决数组的两个缺陷:数…...
React hook之useRef
React useRef 详解 useRef 是 React 提供的一个 Hook,用于在函数组件中创建可变的引用对象。它在 React 开发中有多种重要用途,下面我将全面详细地介绍它的特性和用法。 基本概念 1. 创建 ref const refContainer useRef(initialValue);initialValu…...
Opencv中的addweighted函数
一.addweighted函数作用 addweighted()是OpenCV库中用于图像处理的函数,主要功能是将两个输入图像(尺寸和类型相同)按照指定的权重进行加权叠加(图像融合),并添加一个标量值&#x…...
MODBUS TCP转CANopen 技术赋能高效协同作业
在现代工业自动化领域,MODBUS TCP和CANopen两种通讯协议因其稳定性和高效性被广泛应用于各种设备和系统中。而随着科技的不断进步,这两种通讯协议也正在被逐步融合,形成了一种新型的通讯方式——开疆智能MODBUS TCP转CANopen网关KJ-TCPC-CANP…...
汇编常见指令
汇编常见指令 一、数据传送指令 指令功能示例说明MOV数据传送MOV EAX, 10将立即数 10 送入 EAXMOV [EBX], EAX将 EAX 值存入 EBX 指向的内存LEA加载有效地址LEA EAX, [EBX4]将 EBX4 的地址存入 EAX(不访问内存)XCHG交换数据XCHG EAX, EBX交换 EAX 和 EB…...
AirSim/Cosys-AirSim 游戏开发(四)外部固定位置监控相机
这个博客介绍了如何通过 settings.json 文件添加一个无人机外的 固定位置监控相机,因为在使用过程中发现 Airsim 对外部监控相机的描述模糊,而 Cosys-Airsim 在官方文档中没有提供外部监控相机设置,最后在源码示例中找到了,所以感…...
Mysql8 忘记密码重置,以及问题解决
1.使用免密登录 找到配置MySQL文件,我的文件路径是/etc/mysql/my.cnf,有的人的是/etc/mysql/mysql.cnf 在里最后加入 skip-grant-tables重启MySQL服务 service mysql restartShutting down MySQL… SUCCESS! Starting MySQL… SUCCESS! 重启成功 2.登…...
GitHub 趋势日报 (2025年06月06日)
📊 由 TrendForge 系统生成 | 🌐 https://trendforge.devlive.org/ 🌐 本日报中的项目描述已自动翻译为中文 📈 今日获星趋势图 今日获星趋势图 590 cognee 551 onlook 399 project-based-learning 348 build-your-own-x 320 ne…...
MySQL 8.0 事务全面讲解
以下是一个结合两次回答的 MySQL 8.0 事务全面讲解,涵盖了事务的核心概念、操作示例、失败回滚、隔离级别、事务性 DDL 和 XA 事务等内容,并修正了查看隔离级别的命令。 MySQL 8.0 事务全面讲解 一、事务的核心概念(ACID) 事务是…...
LOOI机器人的技术实现解析:从手势识别到边缘检测
LOOI机器人作为一款创新的AI硬件产品,通过将智能手机转变为具有情感交互能力的桌面机器人,展示了前沿AI技术与传统硬件设计的完美结合。作为AI与玩具领域的专家,我将全面解析LOOI的技术实现架构,特别是其手势识别、物体识别和环境…...
Cilium动手实验室: 精通之旅---13.Cilium LoadBalancer IPAM and L2 Service Announcement
Cilium动手实验室: 精通之旅---13.Cilium LoadBalancer IPAM and L2 Service Announcement 1. LAB环境2. L2公告策略2.1 部署Death Star2.2 访问服务2.3 部署L2公告策略2.4 服务宣告 3. 可视化 ARP 流量3.1 部署新服务3.2 准备可视化3.3 再次请求 4. 自动IPAM4.1 IPAM Pool4.2 …...

