问题解决：Vue项目路由带#，所有的跳转只是别#之后的path

最新推荐文章于 2024-07-24 23:00:08 发布

cen20081007

最新推荐文章于 2024-07-24 23:00:08 发布

阅读量68

点赞数

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

本文链接：https://blog.csdn.net/cen20081007/article/details/133276615

版权

Vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

问题现象

打开的url都带有#/

并且如果访问/test地址，使用host/test的形式无法识别对应的路径，只能识别host/#/test 的路径

问题原因

因为vue-router在创建时采用了hash模式，所以路由的识别路径都在#之后

解决方案

将history模式切换成createWebHistory()模式

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

cen20081007

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
问题解决：Vue项目路由带#，所有的跳转只是别#之后的path

解决Vue项目路由带#，所有的跳转只是别#之后的path。
复制链接

扫一扫

专栏目录

vue去掉访问路径index.html,解决vue项目访问路径#号的问题

weixin_42360967的博客

06-30

4155

解决vue项目访问路径#号的问题发布时间：2020-08-19 11:29:49来源：亿速云阅读：118作者：小新解决vue项目访问路径#号的问题？这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容，让我们一起来看看吧！刚入手vue，有好多的疑问，目前遇到的是vue项目启动之后，输入http://ip:port，我发现浏览器里面显示的地址栏竟...

vue路由跳转错误路径 | 点击事件或刷新后跳转到不正确的路由

dxy1128的博客

10-14

915

vue路由路径不对 | 刷新跳转到不正确的路由

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

Vue项目运行路由总会带#，一行代码搞定！

盖世小可爱的博客

09-03

1698

一、问题使用VUE路由，项目的url总是带有#，如下： http://localhost:8066/#/ 二、解决修改路由文件中 index.js 文件，即 src --> router --> index.js没修改前： export default new Router({ routes: [ { path: '/', name: 'LoginView', component: LoginView } ] }) ...

Vue路由配置‘/’后，输入‘/’下的任何路径都是渲染同一个页面，删除‘/’后就空白了

m0_50488756的博客

11-10

490

Vue路由配置‘/’后，输入‘/’下的任何路径都是渲染同一个页面，删除‘/’后，直接设置其他路由，访问页面就空白了 vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。如果不想要 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。 // 引用模板 import Vue from 'vue'; import Rou

vue路由上的#/怎么去掉_如何去掉vue路由中的#

weixin_39830588的博客

12-19

1537

通过脚手架vue-cli构建的项目，在项目启动后，URL地址上都会带有#，如：http://localhost:8080/#/father原因：这是因为vue-router默认hash模式，使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。因为对于正常的页面来说，更换url一定是会导致页面的更换的，而只有更换url中的查询字符串和hash值得时候...

解决vue项目路由跳转页面不变问题

jiangjunyuan168的博客

05-11

2696

问题：今天在开发vue移动端项目的过程中发现了一个bug，就是当按返回键的时候页面并没有发生变化，一开始还以为是没有监听到返回事件，但是通过测试之后发现返回事件监听成功了，路由也发生了变化，相应事件也触发了，就是页面视图没有跟着改变。解决方法：项目中路由设置的是 hash模式，所以对 hashchange 事件进行监听（hash模式下，路由的变化会触发hashchange事件）在App.vue中给hashchange绑定事件： mounted() { // 检测浏览器路由改变页面不刷新问题

vue路由跳转的带参与不带参,路由跳转传参方式：name 、 path

浩星

09-25

4804

前言：在vue项目中路由的router跳转是很重要的，这里有我自用跳转的方法，最底下还有大神的方法（很详细了）；自己目前用到的方法一：用path跳转加参数，相当于get请求，页面可以看到你传参第一:设置路由 {path: 'Train/studyDetails/:detailId', component: () => import('./views/team...

快速解决Vue 2路由典型问题：编程式路由跳转报错、新页面不自动滚动等常见疑难杂症

weixin_43263566的博客

09-29

2778

Vue2 动态路由、解决跳页面跳转后新页面没有位于顶部的问题、决编程式路由往同一地址跳转时会报错的情况

vue 跳转同一路由不刷新问题解决(相同path不同query)

01-08

遇到个需求，要求在同一个path下，通过不同的query实现跳转不同的页面，大概就是下面这个样子: 这样当全路径变化的时候，就会触发跳转了。 BerySteven_shen 原创文章 79获赞 39访问量 6万+ 关注

vue2.0项目实现路由跳转的方法详解

08-27

Vue2.0 项目实现路由跳转的方法详解在 Vue 项目中，路由跳转是必不可少的一部分，通过路由跳转，用户可以在不同的页面之间进行跳转，提高用户体验。下面我们来详细介绍 Vue2.0 项目实现路由跳转的方法。一、安装...

VUE : vue-cli中去掉路由中的井号#操作

01-19

vue-cli项目中，如果想去掉url地址栏中的“#”我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。只需要在路由表中，加入一行代码即可。补充知识：...

vue相同路由跳转强制刷新该路由组件操作

10-14

在Vue.js应用中，路由是...在进行路由跳转和组件刷新时，理解Vue Router的工作原理至关重要，这可以帮助我们编写出更加灵活且可维护的代码。同时，遵循最佳实践和避免常见错误，如路由命名冲突，也能提高应用的质量。

Vue路由跳转问题记录详解

08-30

在本文中，我们将深入探讨一个具体的Vue路由跳转问题，以及如何解决这个问题。首先，我们要了解Vue Router的基本结构。在示例中，我们看到这样的路由配置： ```javascript { path: '/tab', component: Tab, ...

网站基本布局CSS

m0_46608027的博客

07-24

758

* 滚动条轨道样式 *//* 滚动条样式 *//* 滑块样式 */

ASP.NET Web Api 使用 EF 6，DateTime 字段如何取数据库服务器当前时间

最新发布

yangshuquan的专栏

07-24

779

在做数据库设计时，为了方便进行数据追踪，通常会有几个字段是每个表都有的，比如创建时间、创建人、更新时间、更新人等，这些时间字段一般存储的是数据库服务器的时间，EF 是操作整个数据表对象，所以需要寻找方法来实现这个目的。本文分享 DB First 和 Code First 两种模式的 EF 中 DateTime 字段如何存储数据库服务器当前时间的方法。

TS如何处理js模块的类型？

闻人放歌的三寸青草园圃

07-24

251

【代码】TS如何处理js模块的类型？

Vue使用FullCalendar实现日历/周历/月历

_小郑有点困了的博客

07-23

318

需求背景：项目上遇到新需求，要求实现工单以日/周/月历形式展示。而且要求不同工单根据状态显示不同颜色，一个工单内部，需要以不同颜色显示三个阶段。

VUE 子组件可以直接改变父组件的数据吗

Cshaosun的博客

07-23

317

如果子组件需要修改父组件的数据，‌应该通过触发一个自定义事件来通知父组件进行数据的变更。‌父组件在接收到子组件触发的事件后，‌可以修改数据，‌从而间接地改变父组件的数据。‌这种方式通过明确的事件通信机制，‌保证了数据流的单向性和组件之间的解耦。需要注意的是，‌虽然Vue提供了一些特殊的方法来实现子组件修改父组件数据，‌但这种方式打破了数据流的单向性，‌增加了组件之间的耦合性，‌因此应谨慎使用。在Vue中，‌如果确实需要在子组件中修改父组件的数据，‌可以通过以下步骤实现：‌。

vue项目去掉地址#导致页面无法跳转

05-25

如果你想要去掉 Vue 项目中的地址栏中的 #，可以使用 Vue Router 的 history 模式。在使用 history 模式前，请先确保你的服务器已经正确地配置了 URL 重写，否则在用户在直接访问项目时会出现 404 错误。接下来...