路由传参的两种方式

1.param

给将要跳转到的路由加占位

 {
            path:"/search/:keyword",
            component:Search,
            meta:{
                show:true
            }
        },

goSearch(){
            this.$router.push("/search/" + this.keyword)
        }

 

 

2.query

goSearch(){

            this.$router.push("/search/?keyword=" + this.keyword)

        }

获取query参数

　　

<h1>{{$route.query.keyword}}</h1>

 

开发中一般用对象写法：

　　

goSearch(){

            this.$router.push({

                name:"search",

                query:{

                    keyword : this.keyword

                }

            })

        }

当然要给路由加上name属性

{

            path:"/search",

            name:"search",

            component:Search,

            meta:{

                show:true

            }

        },

let {categoryname,category1id,category2id,category3id} = event.target.dataset
           
            let location = {name:"search"}
            let query = {categoryname:categoryname}
            if(category1id){
                query.category1id = category1id
            }else if(category2id){
                query.category2id = category2id
            }else if(category3id){
                query.category3id = category3id
            }
            location.query = query
            console.log("location",location);
            this.$router.push(location)

注意：点击a链接路由地址不显示的，去掉href