vue-router3路由配置二→路由传参

$outer可以操作路由的跳转  $route可以在跳转的页面接受传递过来的参数

路由跳转

第一种:<router-link></router-link>

使用router-link标签进行跳转

router-link 里的 to=' '的就是跳转的地址,也就是在router文件夹下配置的路径(如下图所示)

第二种:编程式跳转

绑定事件进行跳转

在methods方法里声明并使用 this.$router.push('路由地址') 进行跳转

在router.js 文件配置中路由地址

 路由传参的几种方式:

                跳转方式1  this.$router.push(url)

                    传参   this.$router.push(url+'?id=1')

                跳转方式2  this.$router.push({path:url})

                    传参   this.$router.push({path:url,query:{id:2}})

                跳转方式3  this.$router.push({name:url.slice(1)})

                    传参   this.$router.push({name:url.slice(1),params:{id:3}})

                           this.$router.push({name:url.slice(1),query:{id:4}})

                跳转方式4  this.$router.push({name:'xxx',params:{id:xxx}}) 需要在router.js里配置url/:id


路由跳转传递参数

第一种 使用<router-link></router-link>跳转传递参数

1. 使用router-link传递参数以 ?的形式显示

直接在标签内部使用 :to='路由地址'以字符串的形式拼接传递参数

浏览器中显示的地址是以?的形式id=传递的参数进行显示

2. 使用router-link传递参数以 / 的形式显示

同样也是使用字符串进行拼接

浏览器中显示的地址是以 / 的形式传递的参数进行显示

2. 编程式跳转传递参数、

以下集中在浏览器中以 ? 的形式显示传递的参数(如图所示)

 path+query 形式传递参数

首先在router.js 文件中配置好路由

这里我使用的是v-for循环渲染数据 所以在事件的实参中传入了index

在方法里 使用绑定的事件 并使用的形式进行跳转传递参数

在接收的页面中使用 query 就可以接受到传递过来的参数了 如果在生命周期中接收传递的参数在前面加this.即可

name+params 的形式传递参数

注意:如果使用name跳转路由的话 需要在router.js中配置路由的时候 加name:'设置一个名字' (如下图所示)

           不使用name进行跳转配置路由的时候不写name是可以的(看实际情况)

同样也是绑定事件进行跳转传递参数

这里使用的就是name属性进行跳转以及params的形式传递参数

在接收参数的时候需要使用params接收传递过来的参数

name+query的形式传递参数

注意:如果使用name跳转路由的话 需要在router.js中配置路由的时候 加name:'设置一个名字' (如下图所示)

           不使用name进行跳转配置路由的时候不写name是可以的(看实际情况)

这里我使用的是v-for循环渲染数据 所以在事件的实参中传入了index

这里使用的是query进行传递参数

所以在接收参数的时候需要使用query来接收参数

以下这一种在浏览器中显示是以 / 的形式传递参数

name+params形式传递参数

首先需要再router.js文件中配置路由的时候在路由后面以 /:id 的形式

绑定一个事件

这里使用的就是name属性进行跳转以及params的形式传递参数

在接收参数的时候用params接收即可 

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容