Vue Router路由传参三种方法及区别

1、第一种方法：拼接方式:

methods：{

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

 this$routerpush({path: `/detail/${id}`,})

}

对应路由配置：

{

path:'/detail/:id',

name:'detail',

component: detail

} 获取参数方式： this$routeparamsid

2、第二种方法：params传参 （通过路由属性中的name来确定匹配的路由，通过params来传递参数。）

methods：{

handleClick(id) {

this$routerpush({name:'detail', // 根据name确定匹配路由params: {id: id}})

}

//或者采用router-link前往Detail页面

<router-link :to="{name: 'detail', params: { id: 1 }}">前往Detail页面</router-link>

对应路由配置：

{

path:'/detail/:id',

name:'detail',

component: detail

}  获取参数方式： this$routeparamsid

三、第三种方法：query传参

使用path来匹配路由，然后通过query来传递参数，这种情况下 query传递的参数会显示在url后面id=？

methods：{

handleClick(id) {

this$routerpush({path:'/detail',query: {id: id}})

}

对应路由配置：

{

path:'/detail',

name:'detail',

component: detail

}  //获取参数：this$routequeryid

四、总结：params和query中的区别

1、接收方式

query传参：this$routequeryid

params传参：this$routeparamsid

2、路由展现方式

query传参：/detailid=1&user=123&identity=1&更多参数

params传参：/detail/123

1、登录后跳转的授权页redierectvue，获取动态路由的数组，存储于storets

2、在maints 中引用路由守卫文件

3、在permissionts中用到了

导航前置守卫，在调用路由之前会先调用该方法，在该方法中通过storets的路由数组动态渲染路由后访问。

4、在asyncRouterjs通过定义 getAsyncRoutes 进行路由数组的格式化，同时此处也可以用来通过接口获取路由信息，但是我就不查了，太浪费资源。

permissionts内容如下

1问题描述

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

在 mounted 中打印 $route：

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

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

加一个延时试试：

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

问题推测：

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

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

2用onReady解决

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

长了，影响体验

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

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

经测试，通过。

什么是前端路由？

在单页面中，路由描述的是URL和UI之间的单向映射关系，即URL的变化引起UI的更新，不需要刷新。

核心原理之一：它只是更新视图，不重新请求页面

两种方式：1、hash 利用URL中的hash（“#”） 2、利用history interface在h5中新增的方法

Hash和history的区别？

要实现前端路由，需要解决两个核心：

1、如何改变URL不引起页面的刷新？

2、如何检测URL更新了？

分别从hash和history两种方式实现上面的两个核心问题：

1、hash模式

Hash是url中hash(‘#’)及后面的部分，常用作锚点在页面进行导航

通过hashchange事件监听URL的变化，改变url的方式只有这几种：

(1)通过浏览器的前进和后退改变URL

(2)通过<a>标签改变URL

(3)通过windowlocation改变URL

2、History模式

history提供了pushState和replaceState两个方法，history提供类似hashchange事件的popstate事件，但popstate事件有些不同：

(1)通过浏览器前进后退改变URL时会出发popstate事件

(2)通过pushState和replaceState或者<a>标签改变URL不会触发popstate事件

(3)但是我们可以拦截pushState和replaceState的调用或者<a>标签的点击事件来检测URL的变化

(4)通过js调用history的back、go、forward方法可触发该事件

Vue Router的核心是，通过Vueuse注册插件，在插件的install方法中获取用户配置的router对象。当浏览器地址发生变化的时候，根据router对象匹配相应的路由，获取组件，然后把组件渲染在视图上。

(1)如何在install方法中获取用户配置的router对象

可以利用在Vuemixin混入生命周期函数beforeCreate，在beforeCreate函数中可以获取到vue实例上的属性并赋值到vue原型链上。

(2)如何触发更新

Hash模式下：

通过locationhash改变hsh值，触发更新，

通过监听hashchange实践监听浏览器前进或者后退，触发更新。

History模式下：

通过historypushState修改浏览器地址，触发更新；

通过监听popstate事件监听浏览器前进或者后退，触发更新；

如何渲染router-view组件；

通过Vueobservable在router实例上创建一个保存当前路由的监控对象current，

当浏览器地址变化的时候，改变监控对象current；

在router-view组建中监听监控对象current的变化，当current变化后，获取用户注册的相应component，并利用h函数将component渲染成vnodes，进而更新页面视图。

以上就是关于Vue Router路由传参三种方法及区别全部的内容，包括:Vue Router路由传参三种方法及区别、Vue动态路由实现逻辑、vue-router，路由按需加载，页面加载完成后，this.$route 获取不到等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！