vue项目中动态加载路由组件this.$route undefined
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue项目中动态加载路由组件this.$route undefined相关的知识,希望对你有一定的参考价值。
参考技术A 在项目中偶然间遇到了这样的问题,routes注册设置的时候使用了懒加载的方式,如下:如果是这种方式(方式2),那么在app.vue中你如果先要在 created 或者 mounted 中,通过 this.$route.query.xx 的方式去获取xx参数的值,那就是拿不到的,如果改为方式1,那就可以取得到了。
猜想的原因应该是:项目启动,懒加载方式,路由加载注册的时候没有加载 path:'/' 下的 $route
router 和 route
参考技术A 在使用了 vue-router 的应用中,路由对象会被注入到每个组件中,赋值为 $route , 当切换路由时,路由对象会被更新。 this.$route 表示当前的路由对象3. this.$route.router : 路由规则所属的路由器(以及其所属的组件)
this.$router 包含了很多属性和方法, 任何页面都可以调用。 $router 是一组路由或者说是一种机制,他管理了一组路由 $route 。
* $router 具有如下属性
1. push() 方法: 这个方法会向 history 栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,则回到之前的 URL。
字符串 this.$router.push('home')
对象 this.$router.push(path:'home')
命名的路由 this.$router.push(name:'user', params:userId: '123') ==》/这里的 params 不生效
3. forward() 方法,前进一步 this.$router.forward();
4. go() 方法 可前进可后退
this.$router.go(-1) 后退一步
this.$router.go(2) 前进两步,但当步数大于历史记录数,就会无效,是无效,而不是取一个最大值
this.$router.go(0) 会刷新页面
以上是关于vue项目中动态加载路由组件this.$route undefined的主要内容,如果未能解决你的问题,请参考以下文章