摘要：接收路由的路由传参数的三种方式布尔模式表明将作为传递到匹配的组件中。元信息可在路由对象中配置属性，是一个对象。

路由可向路由匹配的组件传递参数，不同情况向组件传递不同的参数，从而实现组件的复用。

路由向组件传递参数

和路由匹配的组件可以在组件中使用 $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"//默认值
        }
    }
}

对象模式

将路由的 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.