Vue页面跳转,携带参数及参数获取相关方法总结

利用vue框架开发项目的时候,难免会遇到页面跳转,携带参数的需求,总结一下在项目遇到一些日常需求和解决方式。
通过连接传递参数,参数链接可见:

this.$router.push({name: 'b页面',query:{userId: 123}})   //跳转到b页面,携带参数useId.

这里参数可以在链接可见,然后就可以通过截取链接参数名来获取参数了,具体函数:

export function getParameterByName(name) {
  name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
  const regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
  const results = regex.exec(location.href);
  return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
}

页面引入该函数,直接getParameterByName(‘userId’),就ok了。
还有一种,携带参数,链接不可见,确保页面安全性。

this.$router.push({name: 'b页面',params:{userId: 123}}) // 跳转b页面,参数链接不可见

这种方式传递的参数获取更加简单,只需要在b页面中定义一个变量:

let id = this.$router.params.userId;

就拿到相应的参数了。
当然还有通过来跳转的:

<router-link :to="{name:b页面,params:{userId: 123}}">跳转b页面</router-link>

获取参数值同样的只需要定义变量就行了。

猜你喜欢

转载自blog.csdn.net/qq_37322135/article/details/87934122