vue项目路由vue-router传参技巧,四种传参加接收的方式,this.$route.push

一、vue-router是什么?

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。包含的功能有:

嵌套的路由/视图表
模块化的、基于组件的路由配置
路由参数、查询、通配符
基于 Vue.js 过渡系统的视图过渡效果
细粒度的导航控制
带有自动**的 CSS class 的链接
HTML5 历史模式或 hash 模式,在 IE9 中自动降级
自定义的滚动条行为

二、使用步骤

1.使用push进行页面跳转

this.$router.push
写在path路径中的变量,放置在this.$route的params中

路由配置

vue项目路由vue-router传参技巧,四种传参加接收的方式,this.$route.push

父组件配置

vue项目路由vue-router传参技巧,四种传参加接收的方式,this.$route.push

子组件调用形参

vue项目路由vue-router传参技巧,四种传参加接收的方式,this.$route.push

2.使用router-link跳转

router-link
写在path路径中的变量,放置在this.$route的params中

路由配置

vue项目路由vue-router传参技巧,四种传参加接收的方式,this.$route.push

父组件配置

vue项目路由vue-router传参技巧,四种传参加接收的方式,this.$route.push

子组件配置

vue项目路由vue-router传参技巧,四种传参加接收的方式,this.$route.push

3.使用route的params传参

路由配置

vue项目路由vue-router传参技巧,四种传参加接收的方式,this.$route.push

父组件调用push方法,写入参数params

vue项目路由vue-router传参技巧,四种传参加接收的方式,this.$route.push

子组件调用

vue项目路由vue-router传参技巧,四种传参加接收的方式,this.$route.push

4.使用query接收参数

路由配置

vue项目路由vue-router传参技巧,四种传参加接收的方式,this.$route.push

父组件调用push方法

vue项目路由vue-router传参技巧,四种传参加接收的方式,this.$route.push

子组件调用

vue项目路由vue-router传参技巧,四种传参加接收的方式,this.$route.push

总结

good afternoon