Vue3.0路由将哈希(hash)更改为历史(history)模式

最新推荐文章于 2024-08-10 21:02:37 发布

土生土长的IU

最新推荐文章于 2024-08-10 21:02:37 发布

阅读量1.2k

点赞数 3

分类专栏： Vue 3.0 文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/AIB_Kasic/article/details/137351107

版权

Vue 3.0 专栏收录该内容

100 篇文章 1 订阅

订阅专栏

本文详细介绍了如何在Vue.js项目中将路由哈希模式更换为history模式，包括修改配置文件中的根路径、处理全局的哈希跳转以及注意事项，如location.replace的替换以防止页面刷新。

摘要由CSDN通过智能技术生成

路由哈希模式更换为历史模式

步骤

步骤

将路由替换为history模式
更换配置文件中配置的根路径
查找项目中存在的哈希跳转

将路由替换为history模式

import {
  createRouter,
  createWebHistory,
} from 'vue-router'

const router = createRouter({
  history: createWebHistory(), //可指定根路径
  routes,
})

更换配置文件中配置的根路径

此处为vite.config.ts

export default defineConfig({
  base: '/', // 设置打包路径
})

查找项目中存在的哈希跳转

全局搜索

 (`#/ 替换为 (`/

若存在 location.replace 需替换成 router.replace 否则页面会刷新

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

土生土长的IU

关注关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

vue vue-Router默认hash模式修改为history需要做的修改详解

10-18

今天小编就为大家分享一篇vue vue-Router默认hash模式修改为history需要做的修改详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

详解如何去除vue项目中的#——History模式

08-29

主要介绍了详解如何去除vue项目中的#——History模式，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

参与评论您还未登录，请先登录后发表或查看评论

Vue3中的history模式路由：打造无缝导航体验！

最新发布

Jacklx888的博客

08-10

557

Hey小伙伴们，今天给大家带来Vue3中使用history模式路由的实战案例！🌟 Vue3的路由功能非常强大，可以帮助我们轻松实现单页面应用中的页面切换。但是你知道吗？默认情况下Vue Router使用的是hash模式，URL会带上一个“#”。为了获得更加美观的URL，我们可以使用history模式。今天我们就来一起看看如何在Vue3中使用history模式吧！🚀

vue3.0 路由(创建)

要温柔以待的博客

10-28

570

学习目标：提示：这里可以添加学习目标例如：一周掌握 Java 入门知识学习内容：提示：这里可以添加要学的内容例如： 1、搭建 Java 开发环境 2、掌握 Java 基本语法 3、掌握条件语句 4、掌握循环语句学习时间：提示：这里可以添加计划学习的时间例如： 1、周一至周五晚上 7 点—晚上9点 2、周六上午 9 点-上午 11 点 3、周日下午 3 点-下午 6 点学习产出：提示：这里统计学习计划的总量例如： 1、技术笔记 2 遍 2、CSDN 技术博客 3 篇

Vue3：路由的两种模式history模式和hash模式

Brave_heart4pzj的博客

03-21

1869

Vue

vue hash模式切换成history模式

Cynthia_Wiki的博客

10-17

2347

第一步，根据项目情况在router/index.js里修改 mode: 'history', // 放在根目录 base: '/', mode: 'history', // 放在子目录 base: '/子目录名', 第二步，打包配置里，根据项目路径配置情况修改 //子目录 assetsPublicPath: '/子目录名', //根目录 assetsPublicPath: '/...

vue hash模式改成history,同时实现spa预渲染

奇想派

03-01

4101

1.前言由于公司需要把首页进行seo排名,但是首页已经完成好,并且还是hash模式,要做成seo排名,不能有hash模式的#,同时要能读取到渲染好的页面.所以,针对这2点困难,最终想到的解决方案是: 先hash需要转换为history,保证是无#的美观模式; 需要做到提前渲染好,可以采取vue的SSR,spa预渲染或nuxt.js. 2.选取渲染方式首先,hash转换为history已......

Vue下路由History模式打包后页面空白

weixin_34232617的博客

07-02

746

vue的路由在默认的hash模式下,默认打包一般不会有什么问题,不过hash模式由于url会带有一个#,不美观,而且在微信分享,授权登录等都会有一些坑.所以history模式也会有一些应用场景.新手往往会碰到history模式打包后页面一片空白的情况,而且没有资源加载错误的报错信息.这个其实仔细研究下会发现,如果项目直接放的跟目录, 那么是没有问题的,如果是子目录,那么就会一片空白了...

vue路由从hash模式切换到history模式

weixin_45018314的博客

07-16

1792

由于微信登录的限制不得不把hash模式更换为history模式 vue-router 在router.js下增加mode字段，如果部署环境不为根目录，需要添加base属性，填写服务器的路径（.com后路径） home/index为vue-router中路由打包路径也需要修改为对应的前缀，否则访问不到对应的资源 vue.config.jsz 注意！！！！！！：base值路径两侧必须加 / ...

vue-router 将默认的哈西模式改为history模式

秋来九月八

11-05

3242

主要用于非浏览器环境，如服务器端渲染（SSR）或 Electron 等桌面应用。不涉及浏览器 URL，而是直接操作路由历史栈。});默认情况下，Vue Router 使用哈希模式（Hash Mode），因此如果你不显式指定模式，应用程序将使用哈希路由。根据你的项目需求和服务器配置，你可以选择使用哈希模式或历史模式。当使用历史模式时，请确保服务器正确处理路由，以避免刷新或直接访问 URL 时出现 404 错误。

Vue下路由History模式打包后页面空白的解决方法

12-09

Vue.js 是一款流行的前端框架，它的路由管理器 Vue Router 提供了两种主要的路由模式：Hash 模式和 History 模式。这两种模式各有优缺点，适用于不同的应用场景。 Hash 模式是 Vue Router 默认采用的方式，它通过 ...

vue-router中的hash和history两种模式的区别

10-18

Vue-router支持两种路由模式，分别是hash模式和history模式。下面详细解释这两种模式的区别。 ### hash模式 hash模式是早期基于浏览器历史记录管理的前端路由模式。它利用了URL中的hash（即URL中的#符号）的变化来...

vue 哈希路由（hash模式）和历史路由（history模式）的区别

weixin_42066070的博客

01-27

696

随着 ajax 的使用越来越广泛，前端的页面逻辑开始变得越来越复杂，特别是spa的兴起，前端路由系统随之开始流行。从用户的角度看，前端路由主要实现了两个功能（使用ajax更新页面状态的情况下）：记录当前页面的状态（保存或分享当前页的url，再次打开该url时，网页还是保存（分享）时的状态）；可以使用浏览器的前进后退功能（如点击后退按钮，可以使页面回到使用ajax更新页面之前的状态，url也回到之前的状态）；作为开发者，要实现这两个功能，我们需要做到：改变url且不让浏览器向服务器发出请求；

路由的hash模式和history模式（适用于3.x版本的vue-router）

YY的博客

11-30

1513

路由的hash模式和history模式（适用于3.x版本的vue-router）

vue hash模式变history模式

qq_45814232的博客

10-09

367

import VueRouter from "vue-router"; import Vue from 'vue' import Home from "../components/Home"; import About from "../components/About"; Vue.use(VueRouter) const routes=[ {path:'', redirect:'/home'}, {path:'/home',component:Home}, {path:'/about'

【Vue3】路由怎么切换成 history 模式

sparks42的博客

10-14

4411

两句代码： import { createWebHistory, createRouter } from "vue-router"; // 1 const router = createRouter({ history: createWebHistory(), // 2 routes, });

微信公众号开发vue把hash转为history

前进者

09-25

734

最近在做微信公众号项目的时候，因为获得签名或者分享的时候的url微信有如下说明： url是页面完整的url(请在当前页面alert(location.href.split('#')[0])确认)，包括'http(s)://'部分，以及'？'后面的GET参数部分,但不包括'#'hash后面的部分。作为前端怎么把hash转为history？第一步：路由配置的 mode:'history',...

vue-router 由hash向history模式变迁

SunShinessx的博客

01-30

661

一、概念阐述对于 Vue 这类渐进式前端开发框架，为了构建 SPA（单页面应用），需要引入前端路由系统，这也就是 Vue-Router 存在的意义。前端路由的核心，就在于 —— 改变视图的同时不会向后端发出请求。为了达到这一目的，浏览器当前提供了以下两种支持： hash —— 即地址栏 URL 中的 # 符号（此 hash 不是密码学里的散列运算）。比如这个 URL：[http://...

vue将哈希路由改为history路由

07-13

要将 Vue 的哈希路由（hash mode）改为 history 路由（history mode），可以按照以下步骤进行操作： 1. 首先，确保您的项目已经安装了 Vue Router。如果尚未安装，可以使用以下命令进行安装： ```bash npm install vue-router ``` 2. 在项目的主入口文件（一般是 `main.js`）中导入 Vue Router，并创建一个路由实例： ```javascript import Vue from 'vue'; import VueRouter from 'vue-router'; import App from './App.vue'; Vue.use(VueRouter); const router = new VueRouter({ mode: 'history', // 设置为 history 路由模式 routes: [ // 定义路由 // ... ], }); new Vue({ render: (h) => h(App), router, // 将路由实例添加到根组件中 }).$mount('#app'); ``` 注意，这里的关键是将 `mode` 设置为 `'history'`。 3. 在服务器端进行配置，以确保在使用 history 路由时能够正确处理路由请求。这是因为在 history 路由模式下，直接访问某个路由路径时，服务器需要返回对应的页面。例如，在使用 Node.js/Express 作为服务器时，可以添加如下配置： ```javascript const express = require('express'); const path = require('path'); const app = express(); app.use(express.static(path.join(__dirname, 'dist'))); // 处理所有路由请求，返回 index.html app.get('*', (req, res) => { res.sendFile(path.join(__dirname, 'dist', 'index.html')); }); app.listen(3000, () => { console.log('Server started on port 3000'); }); ``` 这样，当用户直接访问某个路由路径时，服务器会返回 `index.html`，然后在客户端由 Vue Router 接管路由的处理。 4. 最后，根据您的需求，使用 Vue Router 的路由功能进行定义和使用路由。这样，您就成功将 Vue 的哈希路由改为了 history 路由。记得在切换路由时，不再出现 `#` 符号，URL 更加美观。