vue-router，路由按需加载，页面加载完成后，this.$route 获取不到

1问题描述

页面中需要路由匹配给当前路由高亮，所以就需要获取当前路由的path，但是发现获取不到

在 mounted 中打印 $route：

获取到的值不对。path 和 fullPath ，明明应该有值，但只有一个 "/" 。

可能在 mounted 中router 的初始化还没有完成，所以取到的是一个初始默认值。

加一个延时试试：

可以发现，有时能获取到，有时获取不到，延时到2000以后，目前测试的是都能获取到。

问题推测：

vue-router 初始化是需要一段时间的，在完成之前，取值只能拿到初始的默认值。

在 mounted 中 router 初始化可能还没有完成。

2用onReady解决

上面用定时器延迟了1000ms，有时能取到 router，于是加长延时时间到2000解决，但是，真正要解决这个问题，肯定不能用定时器，因为延迟的时间无法确定：

长了，影响体验

短了，可能router初始化还没完成

查阅官网API，希望官方提供了 初始化完成时的回调方法 ，果然找到了： onReady

经测试，通过。

ps:传参时是 this$router ,接收参数是 this$route

1 $router 为VueRouter实例，想要导航到不同URL，则使用 $routerpush 方法

2 $route 为当前router跳转对象，里面可以获取 name、path、query、params 等

ps:params传参，push里面只能是 name:'xxxx' ,不能是 path:'/xxx' ,因为params只能用name来引入路由，如果这里写成了path，接收参数页面会是undefined！！！

SEO：搜索引擎优化，

前端路由：控制页面访问路径，单页面应用

后端路由：控制接口

1，URL的hash,locationhash

2,HTML5的history模式，historypushState(data,title,url)

使用vue create '文件名'，创建一个vue脚手架，

vueuse(VueRouter),调用vue-router这个对象上面的install方法，注册两个属性在vue原型对象上，分别是vueprototype$router(整个项目的路由对象)和vueprototype$route(当前活跃的路由对象)

实例化一个VueRouter对象

router-link相当于a标签，跳转页面。router-view相当于一个占位符，把现在页面访问的路径内容加载进来，替换掉router-view

vueRouter跳转页面的方式有用this$routerpush('/home')，this$routerreplace()和用标签<router-lin>

this$routerpush('/homekey='+vaule+'&key1='+vaule1)。在另一个页面用this$routequery获取传过来的值

第一种

父组件中：通过路由属性中的name来确定匹配的路由，通过params来传递参数。

接收参数

第二种

父组件：使用path来匹配路由，然后通过query来传递参数

这种情况下 query传递的参数会显示在url后面id=？

接收参数都是一样

第三种

在路由规则里定义如下

pid是一个变量，在用这个动态路由的时候可以

懒加载是当你点击一个页面时，先缓存所有的链接，不执行，只执行那个页面的资源，这样可以提升效率，提高响应速度。

路由懒加载很简单，在component用import引入组件，如下：

router相当于一个路由器，路由器里面有路由表，既routes，表中很多路由规则，route是routes的一个个路由规则

方案一：

getDescribe(id) {//   直接调用$routerpush 实现携带参数的跳转

this$routerpush({

path: `/describe/${id}`,

})

方案一，需要对应路由配置如下：

{     path: '/describe/:id',

name: 'Describe',

component: Describe

}

很显然，需要在path中添加/:id来对应 $routerpush 中path携带的参数。在子组件中可以使用来获取传递的参数值。

this$routeparamsid

父组件中：通过路由属性中的name来确定匹配的路由，通过params来传递参数。

this$routerpush({          name: 'Describe',          params: {            id: id

}

})

对应路由配置: 注意这里不能使用:/id来传递参数了，因为父组件中，已经使用params来携带参数了。

{     path: '/describe',

name: 'Describe',

component: Describe

}

子组件中: 这样来获取参数

this$routeparamsid

父组件：使用path来匹配路由，然后通过query来传递参数

这种情况下 query传递的参数会显示在url后面id=？

this$routerpush({          path: '/describe',          query: {            id: id

}

})

对应路由配置：

{     path: '/describe',

name: 'Describe',

component: Describe

}

对应子组件: 这样来获取参数

this$routequeryid

这里要特别注意 在子组件中 获取参数的时候是$routeparams 而不是

$router 这很重要~~~

1、受限于url长度限制、地址栏url不美观

2、刷新后参数不会丢失

3、设置props函数模式，将查询字符串以props形式传入路由组件，实现路由与组件解耦

1、受限于url长度限制、地址栏url不美观、路径需要拼接且有顺序要求、

3、设置 props布尔模式 ，将参数通过props传入路由组件，实现路由与组件解耦

4、刷新参数不会丢失

1、刷新后params状态会丢失

2、参数数量大小没有限制

3、设置 props布尔模式 ，将参数通过props传入路由组件，实现路由与组件解耦

以上就是关于vue-router，路由按需加载，页面加载完成后，this.$route 获取不到全部的内容，包括:vue-router，路由按需加载，页面加载完成后，this.$route 获取不到、路由传参并接收参数、vue路由router,routes,route等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！