vue三种传参方法

例子：点击项目列表页，跳转到项目详情

列表页

点击列表页li元素跳转到详情页，并把项目id传给详情页，以便于详情页查询

路由:

项目详情页：

通过路由属性中的name确定匹配的路由，通过params传递参数

路由：

这里的“:/id”可有可无，如果有，添加数据则会在url后显示，不添加则不显示

项目详情页：

通过path匹配路由，通过query传参，这种情况url地址中会有id=

路由配置

详情页获取id

场景：A页面跳转到B页面并携带参数

11不带参数：

12带参数：

21不带参数：

22 query传参

23 params传参

24 直接通过path传参

25 传递对象(obj不能过长否则会报错)

26 params和query的区别

用法同上： this$routerpush()

向前或者向后跳转n个页面，n可为正整数或负整数

1 this$routerpush

跳转到指定url路径，并在history栈中添加一个记录，点击后退会返回到上一个页面

3 this$routergo(n)

向前或者向后跳转n个页面，n可为正整数或负整数

1 query 可以用 name 和 path 匹配路由，通过 this$routequeryid 获取参数，刷新浏览器参数不会丢失

2 params 只能用 name 匹配路由，通过 path 匹配路由获取不到参数，对应的路由配置 path:'/home/:id' 或者 path:'home:id' ，否则刷新浏览器参数丢失

3直接通过url传参， push({path: '/home/123'}) 或者 push('/home/123') ，对应的路由配置 path:'/home/:id' ，刷新浏览器参数不会丢失

this$routergo(n)

向前或者向后跳转n个页面，n可为正整数或负整数

ps : 区别

this$routerpush

跳转到指定url路径，并想history栈中添加一个记录，点击后退会返回到上一个页面

this$routerreplace

跳转到指定url路径，但是history栈中不会有记录，点击返回会跳转到上上个页面 (就是直接替换了当前页面)

this$routergo(n)

向前或者向后跳转n个页面，n可为正整数或负整数

完整url可以用 windowlocationhref

路由路径可以用 this$routepath

路由路径参数 this$routeparams 例如：/user/:id → /user/2044011030 → this$routeparamsid

路由查询参数 this$routequery 例如：/user/searchname=sf → this$routequeryname

参考： >

以上就是关于vue三种传参方法全部的内容，包括:vue三种传参方法、vue路由跳转页面的几种方式及其区别、详解vue 路由跳转四种方式 (带参数)等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！