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

路由可向路由匹配的組件傳遞參數，不同情況向組件傳遞不同的參數，從而實現組件的復用。

路由向組件傳遞參數

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

傳參方式

:、params和query

:在路徑傳遞參數

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

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

path跳轉

name+params跳轉

{{$route.params.id}}

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

params+name傳遞參數

路由：

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

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

  跳轉到 hello

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

  跳轉到 hello

query 參數

query 參數參數，表現為查詢字符串，和localtion.serach一樣的。

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

跳轉到 hello
跳轉到 argu
跳轉到 argu
{{ $route.query.queryName }}

函數傳遞 query

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

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

props 接收路由的 params

路由傳參數的三種方式：

布爾模式

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

User 中定義 props 接收 id:

export default {
    props:{
        id:{
            type:String,
            default:"jackzhou"http://默認值
        }
    }
}

對象模式

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

路由對象：

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

Home 組件：

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

函數模式

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

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

路由：

{
    name: "about",
    path: "/about/:years", //params 有一個參數 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.