路由傳參方式

一、路由的跳轉方式

• 聲明式導航：router-link，要有to屬性
• 編程式導航 ：$router.push|replace實現，可以處理一些業務

二、路由傳參，參數有幾種呢？

• params參數
• query參數

2.1.params參數

1、動態路由時傳參

• 屬於路徑當中的一部分，在配置路由的時候，需要占位。地址欄表現為 /search/v1
• 刷新頁面，參數還在

//占位：
path:'/search/:keyword',

2、非動態路由時傳參

• 不屬於路徑當中的一部分，類似 post請求，地址欄地址不變

• 但是刷新參數數據會消失

• params參數，跳轉路由需要用：name

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

2.2.query參數

• 不屬於路徑當中的一部分，類似於get請求，地址欄表現為 /search?k1=v1&k2=v2，不需要占位
• 跳轉路由需要用：name或path都可以。網上說要用path，但是自己測試都可以。

this.$router.push({
    path:'/search',
    query:{
        k1:this.v1,
        k2:this.v2
    }
});

三、路由傳參

3.1.聲明式導航傳參

<router-link :to="'/search/'+keyword">搜索</router-link>
<!--http://localhost:8080/search/hhh-->
<router-link :to="{path: '/search', name: 'search', params: { keyword: hhh } }">搜索</router-link>

3.2.編程式導航

//1、字符串形式  this.$router.push('/search/'+this.keyword+'?k='+this.keyword.toUpperCase());
//2、模板字符串
this.$router.push(`/search/${this.keyword}?k=${this.keyword.toUpperCase()}`);
//3、對象（常用），傳的是對象，路由跳轉傳參params參數，需要路由配置文件給路由命個名 ==>name:'search'
this.$router.push({
    name:'search',
    params:{
        keyword:this.keyword
    },
    query:{
        k:this.keyword.toUpperCase()
    }
});
//http://localhost:8080/search/hh?k=HH

• 對象（常用）：this.$router.push({name:“路由名字”,params:{傳參},query:{傳參})。
• 以對象方式傳參時，如果我們傳參中使用了params，只能使用name，不能使用path，如果只是使用query傳參，可以使用path

3.3.props

//router/inex.js
{
    name: "search",
    path: "/search/:keyword?",
    component: Search,
    meta: {
    	show: true,
    },
    //1、布爾值寫法,props只能傳params
    props:true
    //2、對象寫法,額外給路由自己傳遞一些props
    props:{
        a:1,
        b:2
    }
    //3、函數寫法，可以params參數、query參數，通過prop傳遞給路由組件(很少用)
    props:($route)=>{
        return{
            keyword:$route.params.keyword,
            k:$route.query.k
        }
    }
    props: ($route) => ({keyword: $route.params.keyword,k: $route.query.k,}),
},

//pages/Search/index.vue
//路由組件可以傳遞props
props:['keyword','a','b','k'],

四、路由傳參相關問題

1、路由傳遞參數（對象寫法）path是否可以結合params參數一起使用？

• 路由跳轉傳參的時候，對象的寫法可以是name、path形式，但是path的寫法不可以和params參數一起使用。
• （路徑參數缺失是無法匹配path里面的占位符）
• 因此，不能，傳params-->對象寫法，是要name的寫法

this.$router.push({
    path:'/search',
    params:{keyword:this.keyword},
    query:{k:this.keyword.toUpperCase()}
});
//這個寫法，真實的是==>http://localhost:8080/#/search?k=HH
//正確路徑，應該的是：http://localhost:8080/#/search/hh?k=HH

2、如何指定params參數可以不傳？

問題場景：配置路由的時候，已經占位了（params參數），但是路由跳轉的時候就不傳遞。

• 這個寫法，真實的是：http://localhost:8080/#/?k=HHH
• 正確路徑，應該的是：http://localhost:8080/#/search/?k=HHH
• 如果路由要求傳params參數，但是你沒傳params參數，發現url會有問題

如何指定params可以傳遞或者不傳遞？

解決：

• 配置路由時，可以在占位符后面加個?【?代表可傳或不傳，正則的問號一次或多次】

//router/inex.js
{
    name:'search',
    path:'/search/:keyword?',
    component:Search,
}

this.$router.push({
    name:'search',
    // params:{keyword:this.keyword},
    query:{k:this.keyword.toUpperCase()}
});
//真實路徑：http://localhost:8080/#/search?k=HHH

3、params參數可以傳遞可以不傳遞，但是如果傳遞為空字符串，如何解決？

• 這個寫法，真實的是：http://localhost:8080/#/?k=， 路徑沒有/search

• 正確路徑，應該的是：http://localhost:8080/#/search?k=

//使用undefined解決：params參數可以傳遞，或不傳遞(傳空字符串)
this.$router.push({
    name: "search",
    params: { keyword: ""||undefined },
    query: { k: this.keyword.toUpperCase() },
});

4、路由組件能不能傳遞props數據

• 可以，見3.4