欢迎您访问 最编程 本站为您分享编程语言代码,编程技术文章!
您现在的位置是: 首页

探索传递参数的三种方法:第三种 - 通过查询字符串(Query Parameters)的方式

最编程 2024-08-01 19:27:30
...

不需要设置占位,地址栏表现为:/search?keyword=123,
跳转路由用name和path都可以

声明式导航
<router-link :to="{path:'/search',query:{keyword:123}}">搜索</router-link>
编程式导航
This.$router.push({

​ path:'/search',

​ query:{ keyword:123 }

})

获取query参数

this.$route.query.keyword

那么params参数和query参数能不能同时传递呢?当然可以

this.$router.push({

​ name:'search',

​ params:{ keyword:123 },

​ query:{ id:001 }

});

以对象形式传参时需要注意,如果使用了params,只能使用name,不能使用path。因为如果提供了 path,params 会被忽略,此时获取到的params将会是undefined。

路由传参的相关问题

params参数可以传递可以不传递,但是如果传递为空字符串,如何解决?
使用undefined解决

this.$router.push({

​ name:'search',

​ params:{ this.keyword || undefined },

​ query:{ id:001 }

});

推荐阅读