Vue-router3路由配置二——路由跳转传参

vue 路由传参的使用场景一般都是应用在父路由跳转到子路由时,携带参数跳转。传参方式可划分为 params 传参和 query 传参,而 params 传参又可分为在 url 中显示参数和不显示参数两种方式,这就是vue路由传参的三种方式。

1、query传参

query 传参(显示参数)也可分为 声明式 和 编程式 两种方式

1、声明式 router-link

该方式也是通过 router-link 组件的 to 属性实现,不过使用该方式传值的时候,需要子路由提前配置好路由别名(name 属性),例如:

子路由配置
父组件设置

2、编程式 this.$router.push

使用该方式传值的时候,同样需要子路由提前配置好路由别名(name 属性),例如:

子路由配置
父组件由点击事件触发

在子路由中可以通过下面代码来获取传递的参数值

2、params 传参(不显示参数)

params 传参(不显示参数)也可分为 声明式 和 编程式 两种方式,与方式一不同的是,这里是通过路由的别名 name 进行传值的

1、声明式 router-link

该方式是通过 router-link 组件的 to 属性实现,例如

2、编程式 this.$router.push

使用该方式传值的时候,同样需要子路由提前配置好参数,不过不能再使用 :/id 来传递参数了,因为父路由中,已经使用 params 来携带参数了,

例如:

子组件路由配置
父组件配置

在子路由中可以通过下面代码来获取传递的参数值

注意:上述这种利用 params 不显示 url 传参的方式会导致在刷新页面的时候,传递的值会丢失

3、params 传参(显示参数)

arams 传参(显示参数)又可分为 声明式 和 编程式 两种方式

1、声明式 router-link、

该方式是通过 router-link 组件的 to 属性实现,该方法的参数可以是一个字符串路径,或者一个描述地址的对象。使用该方式传值的时候,需要子路由提前配置好参数,例如:

子组件路由配置
父组件配置

2、编程式 this.$router.push

使用该方式传值的时候,同样需要子路由提前配置好参数,例如:


子组件路由配置
父组件配置

在子路由中可以通过下面代码来获取传递的参数值

$router方法

1、$router.back() 返回上一级

2、$router.forword() 前进下一级

3、$router.go(n)   n为正数时前进,  负数时后退,  0时刷新

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容