获取参数的两种常用方法:params和query
两种方式的区别是query传参的参数会带在url后边展示在地址栏,params传参的参数不会展示到地址栏。需要注意的是接收参数的时候是route而不是router。两种方式一一对应,名字不能混用。
由于动态路由也是传递params的,所以在 this.$router.push() 方法中path不能和params一起使用,否则params将无效。需要用name来指定页面及通过路由配置的name属性访问。
this.$router.push({name:'Home',params:{data:this.roleName}});
export default {
name: "Home",
data() {
return {
// 左侧菜单数据
menuList: [],
roleName: this.$route.params.data,
在点击登录时,会发现页面没有进行跳转,而且地址也没有发生变化。
检查后发现是路由配置的问题:
path: '/home/:data',
name: 'Home',
要在path中加上'/:data',因为这种方式将参数放在url上,刷新的时候才不会丢失数据。
这是params导致的参数数据丢失。如果不配置参数,页面刷新就会丢失参数导致跳转失败。