Vue路由自动添加#的问题及解决

更新时间：2022年10月09日 16:13:32 作者：LeBRON12234

这篇文章主要介绍了Vue路由自动添加#的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

Vue路由自动添加#

在使用VueRouter时，配置了几个路由规则

尝试在浏览器中输入路由地址（/order,/person等）来测试Vue组件是否跳转成功，发现浏览器总是自动在最后添加#/home，导致跳转失败。

将路由模式设置为history，问题解决。

Vue路由去除链接 / 前面的 #

在创建router实列化的地方添加mode模式即可

const router=new VueRouter({
 
         mode: 'history',  // 添加了mode 为history模式  
            routes
 
        })

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

详细聊聊前端如何实现token无感刷新(refresh_token)
实现token无感刷新对于前端来说是一项非常常用的技术,其本质是为了优化用户体验,下面这篇文章主要给大家介绍了关于前端如何实现token无感刷新(refresh_token)的相关资料,需要的朋友可以参考下
2022-11-11
vue @tap事件之$event用法介绍
这篇文章主要介绍了vue @tap事件之$event用法介绍，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-03-03
VUE利用vuex模拟实现新闻点赞功能实例
本篇文章主要介绍了VUE利用vuex模拟实现新闻点赞功能实例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-06-06
一篇文章总结Vue3.2语法糖使用
Vue3.2(21年8月10日)相比于Vue3新增了语法糖,减少了代码冗余,下面这篇文章主要给大家介绍了关于Vue3.2语法糖使用的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-11-11
详解如何使用webpack在vue项目中写jsx语法
本篇文章主要介绍了详解如何使用webpack在vue项目中写jsx语法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-11-11
vue-cli3项目配置eslint代码规范的完整步骤
这篇文章主要给大家介绍了关于vue-cli3项目配置eslint代码规范的完整步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-09-09
vue脚手架配置预渲染及prerender-spa-plugin配置方式
这篇文章主要介绍了vue脚手架配置预渲染及prerender-spa-plugin配置方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-05-05
Vue 3.0 前瞻Vue Function API新特性体验
这篇文章主要介绍了Vue 3.0 前瞻Vue Function API新特性体验，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-08-08
vue 中 beforeRouteEnter 死循环的问题
这篇文章主要介绍了vue beforeRouteEnter 死循环的问题,在文章末尾给大家补充介绍了vue中beforeRouteEnter使用的误区，需要的朋友可以参考下
2019-04-04
利用vue实现密码输入框/验证码输入框
这篇文章主要为大家详细介绍了如何利用vue实现密码输入框或验证码输入框的效果,文中的示例代码讲解详细,感兴趣的小伙伴可以参考一下
2023-08-08