vue常用的导航跳转带参数this.$router.push

最新推荐文章于 2023-06-29 23:23:19 发布

weixinmingwo

最新推荐文章于 2023-06-29 23:23:19 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixinmingwo/article/details/123073583

本文讲解了如何在Vue应用中通过$router.push进行搜索功能的实现，包括使用命名路由、动态参数和query对象，并提供了两种不同场景下的代码优化，帮助开发者理解和改进路由参数传递方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

this.$router.push({name:'search',params:{keyword:this.keyword},query:{k:this.keyword}});

这是最常用的在router.js定义好

{
    path:'/search/:keyword',//keyword为占位使用 可显示到url上
	component:Search,
	meta:{show:true},
	name:'search' //为搜索定义一个名字 
}

点击搜索

methods:{
			goSearch(){
			    	// this.$router.push({name:'search',params:{keyword:this.keyword},query:{k:this.keyword}});
				let location ={name:'search',params:{keyword:this.keyword || undefined}};
				if(this.$route.query){  //如果有query参数 加上以下代码
					location.query = this.$route.query
					this.$router.push(location);
				}
			}
		}

点击导航按钮搜索

点击导航的代码

methods:{
			goSearch(event){
				let data = event.target.dataset;
				
				//把值都取出来
				let {categoryname,category1id,category2id,category3id} = data;
				//整理跳转的参数
				let location = {name: 'search'};
				let query    = {categoryName:categoryname}
				if(category1id){//往query里增加categoryid
					query.category1id = category1id
				}else if(category2id) {
					query.category2id = category2id
				} else if(category3id){
					query.category3id = category3id
				}
				
				//把location和query参数合并
				location.query = query;
				
				//加入搜索框搜索的param参数
				if(this.$route.params){
					location.params = this.$route.params
				}
				
				
				this.$router.push( location );
			},