vue2和vue3中vue-router从默认模式切换为history模式

最新推荐文章于 2025-03-01 20:33:08 发布
最新推荐文章于 2025-03-01 20:33:08 发布
阅读量2.5k 收藏 1
点赞数 2
分类专栏： vue脚手架中router的使用 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/HOMEXS/article/details/114339116
版权

1.vue3中vue-router从默认模式切换为history模式

为什么要切换vue-router的默认模式hash为history模式呢？这是因为默认的hash模式的url里面localhost:8080后面会接一个/*
在这里插入图片描述
而history模式下的url里面localhost:8080后面则没有/*，更加美观和更加符合url的规则
在这里插入图片描述
解释完为什么vue-router中要切换history模式后下面教我的方法吧




第一步：更换router文件夹下的index.js文件里的默认导入的函数createWebHashHistory为createWebHistory

在这里插入图片描述
更改为
在这里插入图片描述

第二步：将路由对象的History由初始的createWebHashHistory（）设为createWebHistory （）；

在这里插入图片描述
更改为
在这里插入图片描述
恭喜你，更改完成后vue3中vue-router就是history模式啦！

vue2中更改就更简单了

直接在导入的路由对象中添加mode:history就行了
在这里插入图片描述

一文了解vue-router之hash模式和history模式
10-16
本文的主题是关于Vue.js中用于前端路由管理的库vue-router的两种路由模式：hash模式和history模式。它们是vue-router提供的两种主要的导航方式，各有特点，适用于不同的场景和需求。 首先，让我们详细了解一下hash...
Vue3中的history模式路由：打造无缝导航体验！
Jacklx888的博客
08-10 1777
Hey小伙伴们，今天给大家带来Vue3中使用history模式路由的实战案例！🌟 Vue3的路由功能非常强大，可以帮助我们轻松实现单页面应用中的页面切换。但是你知道吗？默认情况下Vue Router使用的是hash模式，URL会带上一个“#”。为了获得更加美观的URL，我们可以使用history模式。今天我们就来一起看看如何在Vue3中使用history模式吧！🚀
Vue3 Vue-Router详解 Vue3配置hash 和 history路由、Vue3封装的路由hook函数(useRouter,useRoute)的使用 路由懒加载、路由分包处理、魔法注释的使用
akkigg的博客
02-08 4057
Vue3 Vue-Router详解 Vue3配置hash 和 history路由、Vue3封装的路由hook函数(usRouter)的使用 路由懒加载、路由分包处理、魔法注释的使用 路由跳转 NotFount页面配置
Vue3：Vue Router的学习（四）
最新发布
weixin_53318497的博客
03-01 1228
定义别名，使用aliaspath: "/",// 定义别名// 定义多个别名：},router-link的使用：< script setup > </ script > < template > 首页 - zz.com < br > < router-link to = " /content?
vue3中路由hash与History的设置
前端程序猿的博客
10-19 8049
history模式直接指向history对象，它表示当前窗口的浏览历史，history对象保存了当前窗口访问过的所有页面网址。URL中没有#，它使用的是传统的路由分发模式，即用户在输入一个URL时，服务器会接收这个请求，并解析这个URL，然后做出相应的逻辑处理。当使用history模式时，URL就像这样：hhh.com/user/id。相比hash模式更加好看。虽然history模式不需要#。但是，它也有自己的缺点，就是在刷新页面的时候，如果没有相应的路由或资源，就会刷出404来。
Vuejs+Webpack部署
Lamar's Blog
11-01 975
使用vuejs+webpack在本地开发的时候很顺利，但在打包部署后子页面不能通过url地址直接访问到，只能通过主页点击前往各子页面
vue3 history模式配置及nginx服务器配置
持续学习中
04-11 1万+
vue3开始默认新建的项目都是history模式，不过history模式打包后想要使用正常访问的话，需要后端服务器进行配置才可以，否则可能会出现刷新后404的问题。这样，我们通过访问https://abc.xxx.com/calculator/或者https://abc.xxx.com/calculator/wap/这个路径就可以正常使用了，刷新也不会出现404问题。以上例子中vite.config.js的配置，打包后访问的路径为https://xxx.com/calculator/。
vue vue-Router默认hash模式修改为history需要做的修改详解
10-18
要将 Vue Router 的模式从 Hash 更改为 History，首先在 `router/index.js` 文件中找到 `createRouter` 或类似的初始化配置，将 `mode` 属性改为 `history`： ```javascript const router = new Router({ mode:...
Vue-router 中hash模式和history模式的区别
10-18
在Vue-router的路由模式中，主要分为hash模式和history模式，它们各有特点和适用场景。下面详细讲解这两种模式的区别和相关知识点。 一、hash模式和history模式的区别 1. URL显示方式不同 - hash模式的URL中会带...
vue-router中的hash和history两种模式的区别
10-18
Vue-router支持两种路由模式，分别是hash模式和history模式。下面详细解释这两种模式的区别。 ### hash模式 hash模式是早期基于浏览器历史记录管理的前端路由模式。它利用了URL中的hash（即URL中的#符号）的变化来...
vue-router启用history模式下的开发及非根目录部署方法
10-17
当使用Vue-Router时，可以选择不同的路由模式，其中最常用的两种模式是hash模式和history模式。本文将详细介绍如何在启用history模式下进行开发，并在非根目录下部署Vue应用。 ### 前端路由的必要性 在传统的多...
【vue-router源码】二、createWebHistory、createWebHashHistory、createMemoryHistory源码解析
MAXLZ的博客
06-05 1万+
【vue-router源码】系列文章将带你从0开始了解vue-router的具体实现。
一文详解:Vue3中使用Vue Router
热门推荐
九仞山的专栏
06-11 3万+
详细介绍了Vue3中使用Vue Router，从Vue Router的安装，基础知识到路由嵌套、路由守卫及路由懒加载等内容详细探讨了Vue Router的使用方法
vue3的vue-router原理
我的博客简介
06-29 813
vue-router官网链接在main.js文件下，给挂载到实例上 动态路由，在组件内部如何去监测路由变化 vue-router基本实现 vue-router开发源码 mini-vue-router代码简单实现的mini-vue-router代码如下App.vue main.js router / index.js router / router.js router / RouterLink.js router / RouterView.js...
在nginx上部署vue2/vue3项目(history模式)
qq_41231694的博客
03-27 6843
1、vue项目路由history模式配置(vue2和vue3整个配置就这一步不一样) vue2配置 const router = new Router({ mode: 'history', // 访问路径不带井号 需要使用 history模式 base: '/bank/page', // 基础路径 routes: [ { path: '/count', name: 'count', component: resolve => require(
关于vue项目history模式的笔记
伟仔的博客
06-22 3312
文章目录1、图片资源路径2、vue.config.js文件的publicPath配置问题3、web容器的问题 vue项目有2种模式：hash模式 、history模式 理论上使用2种模式都可以，但实际上，使用 history模式 更适合一些，主要有以下2点原因。 ① url美观问题，hash显然是不美观的。 ② 微信分享、支付等，需要将url作为参数传递，会将字符 # 后的字符串截断，即：会丢失#后的内容 使用 history模式 需要注意以下问题。 1、图片资源路径 脚手架生成的工程目录，默认将
vue3路由Router的配置和跳转
kimi
03-13 6994
vue3路由Router的配置和跳转
Vue3：路由的两种模式history模式和hash模式
Brave_heart4pzj的博客
03-21 2246
Vue
Vue3路由的两种模式history模式和hash模式
weixin_66557048的博客
12-24 671
之前我们写的项目启动后，浏览器访问时，路径中会有个#/，会导致不够美观，因为一般的访问地址都是。
Express与Vue-router history模式踩坑指南
"这篇文章主要讲解了在Express框架中如何配合Vue-Router使用history模式时遇到的问题及解决策略。Vue-Router有两种模式：hash模式和history模式。默认的hash模式通过URL的hash值来实现页面路由的改变，而无需页面...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值