Vue3 动态路由和参数传递

大佬教程收集整理的这篇文章主要介绍了Vue3 动态路由和参数传递，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

　　User  父组件

　　MyPage 子组件

params类型（单个，动态路由）

　　在父组件里使用MyPage子路由的路径

　　直接传值

 　　或添加动态数据传值

　　:to=" '/父路由/path的子路径名字/'+动态值'"

 　　注：page是子路由里MyPage使用的路径名字page

　　再到路由里引用子组件路径

 　　page/:随便取名字

　　其后在子组件里取值

　　$route 代表当前路由

　　params 参数

　　$router 可以往路由放参数

 　　或在计算属性的方式获取

computed: {
            pagEID:{
                    get(){
                        return this.$route.params.id
                    }
            }
},//也可以省略get直接写默认有get
computed: {
            pagEID(){
                        return this.$route.params.id
            }
},

 父组件 User

子组件 MyArticle

query类型（多个）

　　这种方式不用配置路由，正常引入子组件路径

 　　在父组件里写入

 　　可以直接传也可动态传入

　　:to="{path:'/path父路由名/path子路由名',query:{要传入的值名称:要传入的动态值}}"

　　接收值

<template>
    <div class=''>
        Article....................
        <br> 　　　　$route 当前路由　　　　query  父传入子路由值的query（参数）　　　　
        name:{{$route.query.namE}}
        <br>
        age:{{$route.query.agE}}
    </div>
</template>

 　　如果用按扭的方法点击传值也是一样

 　　用路由传值方式，添加传给article，也可以用对象格式

大佬总结

以上是大佬教程为你收集整理的Vue3 动态路由和参数传递全部内容，希望文章能够帮你解决Vue3 动态路由和参数传递所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。