vue路由传参的三种方式

1.动态路由传参

2.params传参

3.query传参

1.动态路由传参

使用“路径参数”使用冒号 : 标记。当匹配到一个路由时，参数值会被设置到 this.$route.params，也可以使用props来接收

//路由
{path:"/test/:id",name:"test",component:Test
}//跳转方式有三种写法：
<router-link :to="/test/123"></router-link>//或者
this.$router.push("/test/123")//或者使用params传参
this.$router.push({name:test,params:{id:"123"}
})//Test组件使用props接收，或者this.$route.params.id接收props:{id:{type:String,default:""}},mounted(){console.log(this.id)     //123console.log(this.$route.params.id)   //结果相同为123}

2.params传参

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

//路由
{path:"/test",name:"test",component:Test
}//触发方式
this.$router.push({name:test,params:{id:"123"}
})//组件接收
this.$route.params.id     // 123

3.query传参

query 传参（显示参数）也可分为声明式和编程式两种方式，但是query传递的参数不能是对象、数组等复杂类型，会出现乱码的情况，如果要传递复杂类型可以将其转化为json类型，接收后在转化回原类型

//路由
{path:"/test",name:"test",component:Test
}//触发方式
//声明式
<router-link :to="{name:'test',query:{id:123}}">进入test</router-link>
//编程式
this.$router.push({name:test,query:{id:"123"}
})//组件接收
this.$route.query.id     // 123

vue路由传参的三种方式相关推荐

vue路由传参的三种方式/含页面刷新参数丢失解决方案(详细)
vue路由传参的三种方式以及页面刷新参数丢失问题一.路由传参的三种方式 1.传参方式一:params传参 2.传参方式二:路由属性配置传参 3.传参方式三:query传参二.三种传递方式的区别一 ...
详解vue路由传参的三种方式
在我们开发vue项目的时候,路由传参几乎是我们必须要用到的,一般出现场景是,当我们点击某个组件的某个按钮时跳转到另一个组件中,并携带参数,便于第二个组件获取数据.下面我就来说说vue路由传参的三种方式 ...
【vue】vue路由传参的三种方式
前言 vue 路由传参的使用场景一般都是应用在父路由跳转到子路由时,携带参数跳转.传参方式可划分为 params 传参和 query 传参,而 params 传参又可分为在 url 中显示参数和不显示 ...
vue路由传参的三种方式区别（params,query）
最近在做一个项目涉及到列表到详情页的参数的传递,网上搜索一下路由传参,结合自己的写法找到一种适合自己的,不过也对三种写法都有了了解,在此记录一下 1 <ul class="table_ ...
Vue：路由传参的三种方式
文章目录前言方式一:params 传参(显示参数) 1.声明式 router-link 2.编程式 this.$router.push 方式二:params 传参(不显示参数) 1.声明式 rou ...
Vue路由传参的几种方式
前言:顾名思义,vue路由传参是指嵌套路由时父路由向子路由传递参数,否则操作无效.传参方式可以划分为params传参和query传参,params传参又可以分为url中显示参数和不显示参数两种方式.具 ...
vue路由传参的四种方式
vue路由传参一.router-link路由导航父组件: 使用<router-link to = "/跳转路径/传入的参数"></router-link> ...
vue 路由传参的8种方式转
编程式路由传参除了使用创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码来实现. 1. 通过 params 传递路由配置路径参数用冒号 : 表示. cons ...
vue 如何将参数放到连接上_通过Vue路由传参的两种方式及Vue组件中接收参数的方式...
1. Vue传参方式 1.1 通过动态路由传参我们经常需要把某种模式匹配到的所有路由,全都映射到同个组件.例如,我们有一个 User 组件,对于所有 ID 各不相同的用户,都要使用这个组件来渲染.那 ...

vue路由传参的三种方式

1.动态路由传参

2.params传参

3.query传参

vue路由传参的三种方式相关推荐

最新文章

热门文章