vue-router将mode:hash模式修改为history

Vue Router从hash模式切换到history模式实战指南
最新推荐文章于 2024-08-03 17:16:15 发布
原创 最新推荐文章于 2024-08-03 17:16:15 发布 · 830 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文详细介绍了如何将Vue Router的模式从hash模式切换到history模式，并提供了具体的配置步骤，包括修改Vue配置及Nginx服务器设置。参照官方文档，确保无刷新路由在history模式下正常工作。

如果你也和我一样,需要将vue-router的模式由hash修改为history,也许这篇博客就是你的菜~~~

一、 配置流程

  1. 修改mode由hash修改为history
    在这里插入图片描述
  2. 修改nginx中的配置
    在这里插入图片描述

vue官网参考：https://router.vuejs.org/zh-cn/essentials/history-mode.html

vue vue-Router默认hash模式修改为history需要做的修改详解
10-18
今天小编就为大家分享一篇vue vue-Router默认hash模式修改为history需要做的修改详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue-router 中hash模式和history模式的区别
12-10
Vue-router 中hash模式和history模式的关系 在vue的路由配置中有mode选项 最直观的区别就是在url中 hash 带了一个很丑的 # 而history是没有#的 mode:”hash”;  mode:”history”;  hash模式和history模式的...
vue-router 将默认的哈西模式改为history模式
秋来九月八
11-05 3525
主要用于非浏览器环境，如服务器端渲染（SSR）或 Electron 等桌面应用。不涉及浏览器 URL，而是直接操作路由历史栈。});默认情况下，Vue Router 使用哈希模式（Hash Mode），因此如果你不显式指定模式，应用程序将使用哈希路由。根据你的项目需求和服务器配置，你可以选择使用哈希模式或历史模式。当使用历史模式时，请确保服务器正确处理路由，以避免刷新或直接访问 URL 时出现 404 错误。
vue-router默认#修改 mode: “history”
wushen的博客
04-20 2505
mode: “history” 默认URL会夹带 # ；需在router.js 中export default new Router({ mode: “history”,}） vue中mode hash 和 history的区别
vue-router 由hash向history模式变迁
SunShinessx的博客
01-30 757
一、概念阐述 对于 Vue 这类渐进式前端开发框架，为了构建 SPA（单页面应用），需要引入前端路由系统，这也就是 Vue-Router 存在的意义。前端路由的核心，就在于 —— 改变视图的同时不会向后端发出请求。 为了达到这一目的，浏览器当前提供了以下两种支持： hash —— 即地址栏 URL 中的 # 符号（此 hash 不是密码学里的散列运算）。 比如这个 URL：[http://...
history 改成 模式_vue vue-Router默认hash模式修改为history需要做的修改详解
weixin_33322743的博客
12-23 793
主要是因为活动页会存在pc端的时候未登录的用户也需要访问的问题，因为未登录用户在活动页面进行操作的时候会触发到登录事件，然后我们实现的方式是通过接口来判断，该接口标记的是一个upn的值然后登录的时候是单点登录，不知道是否回调地址不支持vue形式下hash模式的路由，因而自动忽视了后面的#路径然后我查了一下一般回调以后#后都会默认为书签，我转义了然而还是只能职别#之前的路径由于不是很清楚登录单点那一...
Vue：vue-router使用指南
最新发布
ChinaDragon10的博客
08-03 1406
Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举
重走vue之vue-router
qq_40708840的博客
10-29 744
vue-router 概述:vue-router是vue的核心插件，用来提供路由功能。通过路由的改变来动态加载组件，达到开发单页面应用网站的目的。 包含的功能有： 嵌套的路由/视图表 模块化的、基于组件的路由配置 路由参数、查询、通配符 基于vue.js过渡系统的视图过渡效果 细粒度的导航控制 带有自动激活的CSS class的链接 HTML5历史模式或hash模式，在IE9中自动降级 自定义的滚动条行为 安装 通过使用cdn导入在线资源 <script src="https://cdn.b
解决vue-router进行build无法正常显示路由页面的问题
08-27
在默认情况下，Vue-Router的mode配置项被设置为"history"，这将导致路由页面无法正常显示。 三、解决方法 解决这个问题的方法是将Vue-Router的mode配置项设置为"hash"。这样，路由页面将可以正常显示。 四、代码...
history 改成 模式_vue项目的mode:history模式
weixin_39776817的博客
12-23 494
最近做的Vue + Vue-Router + Webpack +minitUI项目碰到的问题，在此记录一下，Vue-router 中有hash模式和history模式，vue的路由默认是hash模式，一般开发的单页应用的URL都会带有#号的hash模式，因为整个应用本身而言就只有一个HTML，其他的都是通过router来渲染。简单介绍下两种模式：hash —— 即地址栏 URL 中的 # 符号(此...
vue-router的base和mode配置项
atu1111的博客
09-07 3218
vue-router的base和mode配置项   路由代码如下： const router = new VueRouter({ mode: 'history', base: '/vue', routes })   1) mode    mode: 'history’表示，访问路径不带#号，如：http://localhost:8080/vue   2) base   配置单页应用的基路径，当点击路由时： <router-link to="/">Home</ro
vue下history与hash模式遇到的问题
dududu01的专栏
06-22 2669
一：hash更换为history模式更换需要修改2个地方：1、router-&gt;index.js // mode:'hash', mode: 'history',2、config-&gt;index.js assetsPublicPath: '/', //publicPath: assetsPublicPath[process.env.NODE_ENV]二：hash模...
hash路由模式与history路由模式
麦呢头冷的博客
11-02 8965
1. hash路由模式 hash模式：使用 URL 的 hash 来模拟一个完整的 URL, 其显示的网络路径中会有 “#” 号 hash 虽然出现URL中，但不会被包含在HTTP请求中，对后端完全没有影响，因此改变hash后刷新, 也不会有问题 hash模式示例: http://localhost:8080/#/home http://localhost:8080/#/user 参考: hashChange 2. history模式 history模式： 美化后的hash模式，路...
Vue3.0路由将哈希(hash)更改为历史(history)模式
IU
04-03 2098
Vue3.0路由将哈希(hash)更改为历史(history)模式
vue3.0中改变router为hash或者history
浩星
03-02 1万+
前言: 在这里我们分析总结下vue2.0和vue3.0改变router为hash或者history 的方法。 vue2.0 history: const router = new VueRouter({ mode: 'history', routes: [...] }) hash: const router = new VueRouter({ mode: 'hash', //或者把这句话注释，默认就是hash routes: [...] }) vue3.0...
Vue进阶（七十七）：vue 路由的两种模式：hash与history
IT全栈 华强工作室
09-19 2871
对于Vue 这类渐进式前端开发框架，为了构建SPA（单页面应用），需要引入前端路由系统，这也就是Vue-router存在的意义。前端路由的核心，就在于改变视图的同时不会向后端发出请求。 一、为了达到这个目的，浏览器提供了以下两种支持： 1、hash ——即地址栏URL中的#符号（此hsah 不是密码学里的散列运算）。 比如这个URL：http://www.abc.com/#/hello, hash...
vue去掉#，history模式
不求甚解的博客
08-14 2万+
一、vue项目携带一个#会对开发造成一定的影响： 1、微信三方登录回调地址，有#号时，接收不到code参数 2、微信H5支付的回调地址，不允许有# 3、App分享，处理特殊字符时，可能会对#进行编译 4、有点影响美观 现在网站大多有三方登录，支付等功能，存在#，项目开发就存在很大的障碍。话不多说，开始去掉#吧。 二、去#的原理 vue把#当做自己的根目录，静态资源，比如图片。 去掉...
Router构造配置mode
pobu168的博客
06-13 7345
router官网的说明如下：********************************************我是官网说明分隔符--开始***************************************************************类型: string默认值: "hash" (浏览器环境) | "abstract" (Node.js 环境)可选值: "hash"...
Vue路由History mode模式中页面无法渲染的原因及解决
热门推荐
{{ Coding enjoy }}
07-08 7万+
Vue下路由History mode导致页面无法渲染的原因用 Vue.js + vue-router 创建单页应用，是非常简单的。使用 Vue.js ，我们已经可以通过组合组件来组成应用程序，当你要把 vue-router 添加进来，我们需要做的是，将组件(components)映射到路由(routes)，然后告诉 vue-router 在哪里渲染它们。一般开发的单页应用的URL都会带有#号的has
Vue-router使用详解：解决空白页问题与路由对象属性
首先，Vue-router有两种工作模式：`hash`和`history`模式。`hash`模式基于URL的哈希值来改变视图，URL会显示如`#/some/path`的形式，而`history`模式则利用HTML5的History API，使得URL更加友好，如`/some/path`，但...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值