1.为什么要路由传参

借用最近出现的热词”不忘初心”.这里虚拟一个程序人,姑且叫”孙甲自”吧(确定不是孔乙己?麦客:树人先生不用允许呀).

孙甲自的项目刚发起时有那么一两个金点子一时被人啧啧称道,尔后在众人的喝彩和掌声中吊足了孙先生的胃口,看到这么多的掌声和期望,貌似看到了一个程序人的最高理想,内心一阵翻涌.暗自许诺:"不能辜负了大家的期望,一定造更大的轮子.更好的轮子!!!"
然后甲自在轮子上加上了更多的功能,果然获得了更多的掌声,如此往复.从此甲自先生一骑绝尘,一发不可收拾"我不管,你要的我给你最好,你不要的也帮你想好一并塞给你",一度差点让轮子走火入魔(臃肿不堪).
用户终于有一天用户发出呼声"我就是想XXX而已,你却要YYY我...".
甲自听到后不由得一颤"诶, 我是谁, 我在哪,我在干什么".哦,原来大家要的是如此的朴实,而不是后面的如此这般.

回到VUE此类框架,我们的初心不一定是要征服星辰大海,我们的一个重要的初心是: 要组件化,要程序解耦.我们要一次编写,到处可用(顶多配置下)仅此的而已

可偏偏程序中出现了 $route.params $route.params.pathMatch这还怎么解耦,以后同路的小伙伴不用路由了还怎么快乐的联(wan)编(sua).那就得想办法我组件既然有了props传参,还是得一以贯之的由路由遵循同样的接口来传参.于是有了第二个问题: 路由怎么传参↓

2.路由传参的方式

布尔模式

如果 props 被设置为 true，route.params 将会被设置为组件属性。

对象模式

如果 props 是一个对象，它会被按原样设置为组件属性

const router = new VueRouter({
    routes: [
        { path: '/path1/sub-path', component: SubPath, props: { prop1: false } }
    ]
})

函数模式

props 为一个有返回值的函数

const router = new VueRouter({
    routes: [
        {
            path: '/name',
            component: GetName,
            props: (route) => ({ query: route.query.id })
        }
    ]
})

END