vue项目中动态加载路由组件this.$route.path获取不正确（获取是‘/‘而不是‘/AppHome’）

最新推荐文章于 2023-08-30 17:04:59 发布
最新推荐文章于 2023-08-30 17:04:59 发布
阅读量4.3k 收藏 4
点赞数 1
分类专栏： vue项目实用方法 vue项目经验 文章标签： vue.js elementui 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46112225/article/details/122059967
版权

问题如图

 明明浏览器url看到的path是/AppHome，但是使用this.$route.path或者location.pathname获取的path路径却是错误的‘/’，这是为什么呢？

问题出在当项目启动时，懒加载方式，路由加载注册的时候没有加载path:'/AppHome'下的$route

我当时是这样写的

 这种方式写会导致出现这种情况，我们换种方式

（ 在上面import了这个页面）

完美解决 ，path获取正确了

 

 

晚风914
关注
专栏目录
Vue路由对象属性 .meta $route.matched详解
12-13
$route.fullPath 1 路由是：/path/:type真正路径是：/path/list 2 path匹配路径: /path/list 3 fullPath匹配路由: /path/:type 路由元信息 .meta const router = new VueRouter({ routes: [ { path: '/foo', ...
解决vue.js this.$router.push无效的问题
12-09
在Vue.js应用中，`this.$router.push`是用于实现页面路由导航的重要方法。当它不起作用时，可能会导致开发者困惑。以下是一些常见的原因和解决策略，针对标题和描述中提到的问题进行深入分析。 首先，我们需要理解...
vue获取当前路由/path地址
热门推荐
6块腹肌的博客
07-22 3万+
vue获取路由的参数方法： 使用：this.$route.path即可获取到，如下： let router_path = this.$route.path console.log(router_path) // 输出当前页面的路由，如：/home this.$route输出的信息有：fullPath、hash、matched、meta、params、path、query ...
vue.js this.$router.push获取不到params参数问题
10-15
主要介绍了vue.js this.$router.push获取不到params参数问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue刷新页面后在mounted中无法获取this.$route.path的真实值
lingliu0824的博客
04-13 3597
想要在页面刷新后根据当前路由路径判断当先活跃的菜单，故期望通过this.$route.path来获取当前路径，但在created和mounted中this.$route.path值都为/。 解决：在mounted中使用setTimeout在定时器中获取path mounted () { // 不使用setTimeout无法在created和mounted中获取到this.$route的实际值 setTimeout(() => { const curPath = this.$
vue 3.0 踩坑 Vue Router 在首页获取 fullPath 一直都是 ‘/‘ ?
m0_50929144的博客
03-21 1万+
Vue Router 在首页获取 fullPath 一直都是 ‘/’ ? 项目场景： 今天使用vue 3.0 版本脚手架做项目，在请求拦截里设置了token判断，如果没有token，或token过期，则需要跳到登录页面，顺便带上需要跳回的 URL，登录后跳回来，这里遇到两个坑，第一个坑：vue 3.x版本获取fullPath需要记得带上 .value ；第二个坑就是我们接下来要讲的。 问题描述： 网上找了一一圈，也有人遇到类似的问题，这里引用https://www.v2ex.com/amp/t/613670
this.$route.path
yang295242361的博客
03-12 1万+
//获取当前路由地址 //http://localhost:8002/#/addGoods => addGoods this.$route.path.replace('/','')
App.vue 监听 resize 屏幕变化事件，偶然性 获取 路由 path 不正确
TGODS
09-01 914
App.vue 监听 resize 屏幕变化事件，偶然性 获取 路由 path 不正确
Vue中this.$router.push参数获取方法
11-26
由于动态路由也是传递params的，所以在 this.$router.push() 方法中path不能和params一起使用，否则params将无效。需要用name来指定页面。 及通过路由配置的name属性访问 在路由配置文件中定义参数：   通过name...
Vue 懒加载组件 路径不对
QQ1035661353的博客
07-18 2254
最近在使用VueRouter的懒加载组件的时候.const routes = [ { path: '/', component: App }, { path: '/category', component: resolve => {require(['./components/Category.vue'], res
VueRouter 同一个路由（复用同一个组件） 页面不重新加载解决办法
吴冬雪的博客
12-07 3895
【代码】VueRouter 同一个路由（复用同一个组件） 页面不重新加载解决办法。
APP.vue获取this.$route问题
zwbHUST的博客
09-02 3356
在项目中偶然间遇到了这样的问题，routes注册设置的时候使用了懒加载的方式，如下： routes: [ { path: '/', name: 'index', // component: index //方式1 component: () => import('./views/index.vue'); //方式2 }, ... ] 如果是这种方式（方式2），那么在app.vue中你如果先要在 created 或者
vue3+vite动态添加路由，后端返回路径，前端import(路径变量)路由懒加载，解析不了地址
最新发布
virtual_love的博客
08-30 340
字符串拼接也不行如下图所示。
解决vue-router不同的path使用同一个组件切换不重新渲染的问题
qq_36344419的博客
03-05 1816
最近在维护项目中遇到一个问题，通过router-link切换页面，两个二级菜单跳转到同一个component里传递不同的参数（path设置不同，对应同一个component），切换按钮时发现浏览器地址栏url改变，页面不会重新渲染无法获取对应的参数，后面查了下其他的文档解决，公共页面里监听路由变化，代码如下： watch: { ‘$route’(to, from) { console.log( to.params) //此处可以打印路由参数 //根据需求在此可以做一些参数处理 } }, ...
this.$route路由对象属性
Blablabla_的博客
11-02 3562
包括的属性有： $route.path 类型: string 字符串，对应当前路由的路径，总是解析为绝对路径，如 “/foo/bar”。 $route.params类型: Object 一个 key/value 对象，包含了动态片段和全匹配片段，如果没有路由参数，就是一个空对象。在使用带参数的路由路径时，传递的参数值。 $route.query类型: Object 一个 key/value 对象，表示 URL 查询参数。例如，对于路径 /foo?user=1，则有 $route.query.user ==
vue pc项目 router.js 配置详解 ，vue项目中路由懒加载的正确使用，vue实现动态路由一步到位
m0_49515138的博客
11-17 4407
这个是我之前一个项目的router.js 文件 xmjd 路由懒加载: 使用() => import();的方式导入组件 这样可以在进入当前路由的时候加载路由 如果不使用懒加载 会在第一次进入页面后 一次性加载所有路由 所以首屏加载会慢如果一个项目过大 大量的使用路由懒加载会导致页面的热更新过慢 推荐在开发环境下不使用懒加载 这样有利于开发的效率 在生产环境可以使用路由懒加载通过process.env.NODE_ENV可以访问到当前是什么环境 可以在utils文件夹下创建两个文件 util.import.
vue使用this.$route获取路由信息
晚风的博客
12-21 4074
一、this.$route this.$route.path为页面的路由路径 二、location loaction.pathname 和this.$route.path效果相同
【elementui+vue】使用导航时设置:default-active=“$route.path“无效的问题
Hemri2580的博客
10-08 3096
【elementui+vue】使用导航时设置:default-active="$route.path"无效的问题
vue this.$route和this.$router的区别，用例子说明
08-17
当我们在Home组件中要获取当前路由的路径时，我们可以使用this.$route.path。例如，我们可以在Home组件的模板中使用 {{ this.$route.path }} 来显示当前路径。当我们访问"/home"时，模板中显示的内容就是"/home"。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值