路由傳參方式

阿新 • • 發佈：2022-01-17

一、路由的跳轉方式

宣告式導航：router-link，要有to屬性
程式設計式導航：$router.push|replace實現，可以處理一些業務

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

params引數
query引數

2.1.params引數

屬於路徑當中的一部分，在配置路由的時候，需要佔位。位址列表現為 /search/v1/v2

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

2.2.query引數

不屬於路徑當中的一部分，類似於get請求，位址列表現為 /search?k1=v1&k2=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資料