• 【Vue 路由(vue—router)二】路由传参(params的类型 、Query参数的类型、路由name)


    目录

    前言

    一、路由传参

    效果展示

    1.params的类型 (后附源码)

     params的类型源码不要在意注释代码

    2.​​​​​​query参数的类型(后附源码)

     query参数的类型源码同样无视注释代码

    3.路由name


    前言

    此内容为连载,想要完整内容参考,可以私聊。

    一、路由传参

    效果展示

    通过传参,可以让Persons路由组建中的内容,在新的路由组件Show显示出来,Show路由组件要嵌套到Persons路由组件中

    Persons路组件中的内容

    a0d6a9386c7a4f609f194c9792d9e82a.png

     76956efb5770420e9361f72dd205da7d.gif

    1.params的类型 (后附源码)

     path:‘show/:id/:realname’  :id/:realname,是为传参所声明的,props:true 可以理解成可以传参,这只是其中的一种方法,也是个人觉得最简单理解的方法。 4cfd6f2c0f564223bd9357cc7d8c1230.png

    在persons路由组件中经过v-for遍历数组获得值,赋值给传参目标 

    269c4896a3e247408a659772cf0a8cce.png

    在show路由组建中,使用props:['id','realname'],这要对应上,在index.js所声明的名字

    4fbbd2618715438db74a8eb854bbcf0b.png

    params的类型源码不要在意注释代码

    跟上文顺序一样,一一对应 

    1. {
    2. path:'/persons',
    3. component:Persons,
    4. children:[
    5. {
    6. path:'show/:id/:realname',component:Show,props:true
    7. // name:'show', path:'show',component:Show
    8. }
    9. ]
    10. },