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

例子：点击项目列表页，跳转到项目详情

列表页

点击列表页li元素跳转到详情页，并把项目id传给详情页，以便于详情页查询

路由:

项目详情页：

通过路由属性中的name确定匹配的路由，通过params传递参数

路由：

这里的“:/id”可有可无，如果有，添加数据则会在url后显示，不添加则不显示

项目详情页：

通过path匹配路由，通过query传参，这种情况url地址中会有id=

路由配置

详情页获取id

很多前端老铁通常在做PC端管理系统类的项目时，会使用vue-router和ElementUI中的el-menu结合的方式：

   router参数为引入的routerjs文件。在配置vue的路由时，采用 命名视图 。如下：

在router文件中引用上述配置：

一般情况下，使用这样的方式已经可以满足各种路由的要求。直接点击左侧menu边栏可实现路由的切换。但需要带query参数时，会出现问题：

当我们想要配置query参数时，官方推荐的方法为：

当我们的当前url为： >

1<router link to=""/>    可以接收一个url 如'/home'   ,也可以接收一个对象 {name:'home'}   {path:'/home'}

2this$routerpush()   也可以接收一个url  ’/home‘    ,也可以接收以一个对象，并配置参数，

可以使用query配置需要携带的参数，需要使用path引入query，如果使用query配置参数，则会在地址栏中显示参数，传值方式类似于get，页面刷新参数不会消失

{path:'/home',query:{

    id:thisid

    }

}

也可以使用params配置需要携带的参数，需要使用name引入params,如果使用params配置参数，不会在地址栏中显示参数，传值方式类似于post，页面刷新参数会消失

{name:'home',params:{

            id:thisid

    }

}

传参方式也可以使用动态路由 this$routerpush('/detail/'+id)

3this$routerreplace() 使用方式同this$routerpush()   

replace会覆盖前一个路由，push是在前一个路由后面添加一个路由，区别在于回退时，push会回退到上一个路由，replace因为覆盖了上一个路由，则会回到至上上个路由

注册的路由中含有错误文件路径。

前端路由跳转含有错误文件路径，找不到需要跳转的页面。

vue中el-link可以使用下面两种方式跳转。

1链接式跳转，在跳转的地方直接引用。

2函数式跳转，对象进行跳转后读取和接收参数。

场景：A页面进入到B页面时，通过路由传参数，由B页面获取。B页面进入到C页面，回退到B页面（点击浏览器后退按钮，或手机后退功能）时参数丢失导致数据无法正常显示。

补充： C页面同样需要传入参数，且参数体包含B页面参数。（由于前置条件限制比较多，此解决方案比较取巧。）

通过度娘查找了一些方式，有的建议使用Vuex的，有的 建议使用LocalStorage/SessionStorage的 ，八仙过海，真是条条大路通罗马。

由于本人属于vue初学者，学习能力一般，很容易陷到发散的怪圈里（遇到一个新技术去查资料，在过程中又遇到一个新知识，导致如此循环，最终感觉这玩意太难了……），所以放弃了Vuex，觉得真正需要这个的时候再去了解学习吧。第二种方式在查询Storage时有人提出如果遇到XSS，使用Storage是不安全的，强迫症的突然发作，虽然现阶段只是学习，即使真正的使用环境也只是手机端，不存在修改网页内容的情况下，还是选择了放弃此方案。

于是乎触发了自身钻牛角尖的特性，尝试通过其他方式去解决这个问题。由于使用vue-route来跳转，决定在官方文档查找资料，看是否有途径可以解决。

先上最终的解决方案，通过 导航守卫 中的routebeforeRouteEnter解决了这个问题，可能还有更好的解决方式，现阶段对这种方案还是比较满意的，既没有发散学习点，也没有使用vue以外的技术。

paramB为需要的参数，由于C页面入参包含B页面入参，因此在B页面添加此配置，监控是否从C页面返回，来获取参数值显示相关数据。

在发现导航守卫这个东西时，感觉好像可以解决问题，本着拿来主义的想法，于是乎踩坑旅程开始了。

修改导航后，又重新回调了beforeRouteLeave方法，再次进入判断，如此反复导致死循环。

遗留问题2：页面终于可以正常回退了，但是B页面需要点击2次才能回退到A页面。第一次点击回退时并没有触发B页面的beforeRouteLeave方法，第二次真正回退到A页面时才触发了该方法。这是什么鬼？

看来不了解机制会死的很惨- -# 以后再慢慢研究吧

项目中很多情况下都需要进行路由之间的传值，想过很多种方式

sessionstorage/localstorage/cookie 进行离线缓存存储也可以，用vuex也可以，不过有些大材小用吧，不管怎么说因场景而异

下面我来说下vue自带的路由传参的三种基本方式

先有如下场景 点击当前页的某个按钮跳转到另外一个页面去，并将某个值带过去

第一种方法 页面刷新数据不会丢失

需要对应路由配置如下：

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

另外页面获取参数如下

第二种方法 页面刷新数据会丢失

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

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

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

第三种方法

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

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

对应路由配置：

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

特别注意哦，

组件中 获取参数的时候是 router 这很重要~~~

以上就是关于Vue Router路由传参三种方法及区别全部的内容，包括:Vue Router路由传参三种方法及区别、vue三种传参方法、【vue】vue-router中切换页面query参数丢失的解决方法等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！