vue 直接输入路由地址进入_vue地址栏直接输入路由无效问题

Posted where there is a will, there i

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue 直接输入路由地址进入_vue地址栏直接输入路由无效问题相关的知识,希望对你有一定的参考价值。

vue 项目只要不是静态页面,一般都会和官方的路由管理器 vue-router 一起使用。

最近项目有一个需求,是在地址栏输入路由,跳转到对应路由组件,在开发环境中这样做是可以跳转的,但是项目打包后,通过地址栏跳转会报错。

因为 vue 在页面上显示哪个组件是根据 vue-router 进行控制的,在地址栏上直接输入路由名称,并不能触发 vue-router 的规则,所以只能通过监听地址的改变,利用回调函数在组件内部进行动态修改路由。

方式一:history 模式

vue-router 默认是 hash 模式,通过更改模式为 history 模式可以解决这个问题,但是这需要后端配合,更改服务端配置,虽然过程稍麻烦但也是一个办法,有兴趣的朋友可以查看往期文章 。

方式二:hashchange 事件

什么是 hash?

hash 就是 URL 地址中 # 字符后面的字符串。

更改它不会导致整个页面重新加载,而且可以定位到元素 id 或 name 与之相同的位置(锚点)。

window.location.hash 可以获取到 hash。比如 localhost:8080/#/abcde 的 location.hash="#/abcde"。

通过监听 hash 的状态,来动态修改 vue-router 的路由,是页面进行组件切换,这样就不会导致页面报错或 404 了。

当 hash 被修改时,将触发 hashchange 事件(IE8 +支持):

window.addEventListener(\'hashchange\',function(e) {
console.log(e.oldURL);

console.log(e.newURL)

},false);

所以在 App.vue 中添加此事件:

mounted(){
window.addEventListener(\'hashchange\',()=>{
var currentPath = window.location.hash.slice(1); // 获取输入的路由

if(this.$router.path !== currentPath){
this.$router.push(currentPath); // 动态跳转

}

},false);

}

这样即可解决,在地址栏输入路由跳转无效问题。

觉得有帮助的话,就分享给你觉得需要的朋友吧!
————————————————
版权声明:本文为CSDN博主「丶favor」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/weixin_35882650/article/details/113687032

以上是关于vue 直接输入路由地址进入_vue地址栏直接输入路由无效问题的主要内容,如果未能解决你的问题,请参考以下文章

Vue Router:直接从浏览器地址栏访问页面

vue实现未登录跳转到登录页面

Vue Router 不保留在地址栏中输入的 URL

通过在 react-router 的地址栏上输入它的地址直接访问路由器

AWS Amplify 和 Vue 路由器历史模式

vue2开发中如何去掉地址栏中的#号