摘要：接收路由的路由傳參數(shù)的三種方式布爾模式表明將作為傳遞到匹配的組件中。元信息可在路由對象中配置屬性，是一個對象。

路由可向路由匹配的組件傳遞參數(shù)，不同情況向組件傳遞不同的參數(shù)，從而實現(xiàn)組件的復(fù)用。

路由向組件傳遞參數(shù)

和路由匹配的組件可以在組件中使用 $route 獲取路由上的參數(shù)：

傳參方式

:、params和query

:在路徑傳遞參數(shù)

{
    path: "/argu/:id/book",
    name: "argu",
    component: () => import("@/views/ArguPage")
}

路徑中的一部分是參數(shù)，必須傳遞該參數(shù)：

path跳轉(zhuǎn)

name+params跳轉(zhuǎn)

{{$route.params.id}}

此時 path+ parmas傳遞參數(shù)，params會被忽略。

params+name傳遞參數(shù)

路由：

{
    path: "/argu",
    name: "argu",
    component: () => import("@/views/ArguPage")
}

跳轉(zhuǎn)方式是 name+params+（query），通過path跳轉(zhuǎn)，params 會被忽略。

  跳轉(zhuǎn)到 hello

// path + params ，params 會被忽略，因為路徑中沒有定義參數(shù)

  跳轉(zhuǎn)到 hello

query 參數(shù)

query 參數(shù)參數(shù)，表現(xiàn)為查詢字符串，和localtion.serach一樣的。

不需要先在路徑中先定義，可通過path、path+query 或者 name + query 傳遞參數(shù)。

跳轉(zhuǎn)到 hello
跳轉(zhuǎn)到 argu
跳轉(zhuǎn)到 argu
{{ $route.query.queryName }}

函數(shù)傳遞 query

// 主要是  $router 不是 $route
go() {
    this.$router.push({
        name: "argu",
        query: {
                queryName: "你好"
            }
        })
    }
}

但是這樣使得 $route 和組件耦合在一起，不方便組件的復(fù)用，如果能將路由中的參數(shù)傳遞到 組件的props 就好了，恰恰是可以這樣設(shè)置的。

props 接收路由的 params

路由傳參數(shù)的三種方式：

布爾模式

{
    path: "/user/:id", 
    component: User, 
    props: true //表明 將 id 作為 proos 傳遞到匹配的組件 User 中。
}

User 中定義 props 接收 id:

export default {
    props:{
        id:{
            type:String,
            default:"jackzhou"http://默認(rèn)值
        }
    }
}

對象模式

將路由的 props 屬性設(shè)置一個對象，也可在組件中獲取到該值，這種方式往往用于傳遞靜態(tài)值，即 name 值不會變化。

路由對象：

{
    name: "home",
    alias:"/home_page",
    path: "/",
    props:{name:"jack jack"},
    component: Home
}

Home 組件：

props:{
    name:{
        type:String,
    }
}

函數(shù)模式

以上兩種方式，params 參數(shù)的名字必須和組件中的props 屬性名字相同，如果想對 params 進(jìn)行改造后傳遞到組件，就可將 props 設(shè)置成函數(shù)，在函數(shù)內(nèi)獲取路由中的 params 或者 query，或者其他屬性值，對其進(jìn)行處理后再傳遞給組件。

注意：這種方式函數(shù)必須返回一個對象。

路由：

{
    name: "about",
    path: "/about/:years", //params 有一個參數(shù) years
    props:(route) {
          const now = new Date()
          return {
        // 將 years 改造成 name
        name: (now.getFullYear() + parseInt(route.params.years)) + "!"
        }
        },
    component: () => import("@/views/AboutPage"),
}

組件中的 props:

props: {
    name: {
        type: String
    }
}

命名視圖的路由，要為每個命名視圖添加 props：

{
    path:"/name/:view",
    name:"name_view",
    components:{
        default:()=>import("@/views/ChildPage"),
        sister:()=>import("@/views/SisterPage"),
        brother:()=>import("@/views/BrotherPage"),
    },
    props:{
        default:true,
        sister:false,
        brother:(route)=>({view:route.params.view.toUpperCase()})
    }
}

完整的例子

{% raw %}

See the Pen
route 的 params 傳遞組件 by JackZhouMine (@JackZhouMine)
on CodePen.