this.$route.path 和 location.href获取的值不一样

guhy fighting

于 2024-09-05 10:39:13 发布

阅读量592

点赞数 5

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/u013994400/article/details/141924224

版权

引言：

vue项目中动态加载路由组件this. $ro u t e . p a t h 获取不正确（获取是 ‘/‘ 而不是 ‘/ f or g e tPw d ’ ）浏览器中的路由是 / f or g e tPw d ，路由全局钩子 ro u t er . b e f ore E a c h 得到的 p a t h 也是 / f or g e tPw d, 但是在页面 in d e x . vu e 中的生命周期 cre a t e d 获取到的 p a t h 是 / ，这个时候想到 t hi s .$ route.path 的底层获取逻辑是location.href，那我同时去打印location.href，得到的却和router.beforeEach里面得到的一样，也就是说 this.$route.path 和 location.href 得到的值不一样

原因：

问题出在当项目启动时，懒加载方式，路由加载注册的时候没有加载path:‘/forgetPwd’下的$route
查看路由配置，懒加载方式
const forgetPwd= r => require.ensure([], () => r(require(’@/components/forgetPwd.vue’)), ‘forgetPwd’)
改成
import forgetPwd from ‘@/components/login/forgetpwd.vue’
这时候在查看路由，发现完美解决