vue-router的动态路由匹配(路由组件传递参数)

router与对应路由形成高度耦合 不够灵活 所以可以使用props将组件和路由解耦

 

路由组件传递参数有三种方式

props的值为布尔型

vue-router的动态路由匹配(路由组件传递参数)_第1张图片

vue-router的动态路由匹配(路由组件传递参数)_第2张图片

完整代码:





    
    
    
    Document
    
    
    



    
user1 user2 user3 用户登录

 

props的值为对象类型时

注: 当为props指定为对象时 此时id已无法访问 对象里有什么数据 才可以接受什么样的数据 如uname,age

vue-router的动态路由匹配(路由组件传递参数)_第3张图片

vue-router的动态路由匹配(路由组件传递参数)_第4张图片

完整代码:





    
    
    
    Document
    
    
    



    
user1 user2 user3 用户登录

props的值为函数类型 

如果有想要获取id和姓名年龄 即可使用函数类型传递参数 将动态值和静态值一起传递

vue-router的动态路由匹配(路由组件传递参数)_第5张图片

vue-router的动态路由匹配(路由组件传递参数)_第6张图片

完整代码:





    
    
    
    props为对象类型
    
    
    



    
user1 user2 user3 用户登录

你可能感兴趣的:(vue)