vue路由params来传递参数（Vue-router如何传递参数）

本文目录

• Vue-router如何传递参数
• vue this.router 怎么传递参数
• Vue 路由传值的几种方法
• vue 路由传参数和隐藏参数
• Vue Router路由传参三种方法及区别
• vue-router 路由动态传参 query和params的区别
• vue使用props在组件中传输和接收参数

Vue-router如何传递参数

***隐藏网址***

开发中，参数的传递是个最基本的业务需求。通过URL地址来传递参数是一个形式，这节课我们就看看vue-router为我们提供了哪些传递参数的功能。我们先想象一个基本需求，就是在我们点击导航菜单时，跳转页面上能显示出当前页面的路径，来告诉用户你现在所看的页面位置（类似于面包屑导航）。

一、用name传递参数
前两节课一直出现name的选项，但是我们都没有讲，这节课我们讲name的一种作用，传递参数。接着上节课的程序继续编写。

两步完成用name传值并显示在模板里：

在路由文件src/router/index.js里配置name属性。

模板里(src/App.vue)用$route.name的形势接收，比如直接在模板中显示：

二、通过《router-link》 标签中的to传参

也许你也会觉的上边的传参很不正规，也不方便，其实我们多数传参是不用name进行传参的，我们用《router-link》标签中的to属性进行传参，需要您注意的是这里的to要进行一个绑定，写成:to。先来看一下这种传参方法的基本语法：

这里的to前边是带冒号的，然后后边跟的是一个对象形势的字符串.

了解基本的语法后，我们改造一下我们的src/App.vue里的《router-link》标签,我们把hi1页面的《router-link》进行修改。

给在src/router/index.js文件里的hi1配置的路由起个name,就叫hi1.

最后在模板里(src/components/Hi1.vue)用$route.params.username进行接收.

总结： 今天我们学习了两种传参的方法，一般会使用第二种方法。我们通过学习也知道了name的用途，一种作用是传参，一种作用是在传参时起到名称作用。传参的操作在实际开发中是基本的需求，我们一定要掌握好啊。

vue this.router 怎么传递参数

主要有以下几个步骤：
（1） 设置好路由配置
router.map({
’/history/:deviceId/:dataId’: {
name: ’history’, // give the route a name
component: { ... }
}
})
这里有2个关键点：
a）给该路由命名，也就是上文中的 name: ’history’,
b）在路径中要使用在路径中使用冒号开头的数字来接受参数，也就是上文中的 :deviceId, :dataId；
（2）在v-link中传递参数；
《a v-link="{ name: ’history’, params: { deviceId: 123, dataId:456 }}"》history《/a》
这里的123，456都可以改用变量。
比如该template所对应的组件有2个变量定义如下：
data: function() {
return {
deviceId:123,
dataId:456
}
}
此时上面那个v-link可以改写为：
《a v-link="{ name: ’history’, params: { deviceId: deviceId, dataId: dataId }}"》history《/a》
（3）在router的目标组件上获取入参
比如在router目标组件的ready函数中可以这么使用。
ready: function(){
console.log(’deviceid: ’ + this.$route.params.deviceId);
console.log(’dataId: ’ + this.$route.params.dataId);
}

Vue 路由传值的几种方法

方案一：

getDescribe(id) {//   直接调用$router.push 实现携带参数的跳转
this.$router.push({
path: `/describe/${id}`,
})

方案一，需要对应路由配置如下：

{     path: ’/describe/:id’,
name: ’Describe’,
component: Describe
}

很显然，需要在path中添加/:id来对应 $router.push 中path携带的参数。在子组件中可以使用来获取传递的参数值。

this.$route.params.id

方案二：

父组件中：通过路由属性中的name来确定匹配的路由，通过params来传递参数。

this.$router.push({          name: ’Describe’,          params: {            id: id
}
})

对应路由配置: 注意这里不能使用:/id来传递参数了，因为父组件中，已经使用params来携带参数了。

{     path: ’/describe’,
name: ’Describe’,
component: Describe
}

子组件中: 这样来获取参数

this.$route.params.id

方案三：

父组件：使用path来匹配路由，然后通过query来传递参数
这种情况下 query传递的参数会显示在url后面?id=？

this.$router.push({          path: ’/describe’,          query: {            id: id
}
})

对应路由配置：

{     path: ’/describe’,
name: ’Describe’,
component: Describe
}

对应子组件: 这样来获取参数

this.$route.query.id
这里要特别注意 在子组件中 获取参数的时候是$route.params 而不是
$router 这很重要~~~

vue 路由传参数和隐藏参数

vue中路由中需要传递参数的话可以用query和param传递，两者类似于get和post。前者地址栏类似xx?p=1后者为xx/1，且后者可以隐藏地址栏显示。其实也可以用vue推荐的vuex进行响应式的参数管理。

两者传递参数需要router/index.js进行配置：

只需要去掉修改path即可，但是刷新会丢失数据，可以通过localstorage解决刷新问题。

Vue Router路由传参三种方法及区别

1、第一种方法：拼接方式:

methods：{

handleClick(id) {//直接调用$router.push 实现携带参数的跳转

 this.$router.push({path: `/detail/${id}`,})

}
对应路由配置：
{

path:’/detail/:id’,

name:’detail’,

component: detail

} 获取参数方式： this.$route.params.id
2、第二种方法：params传参 （通过路由属性中的name来确定匹配的路由，通过params来传递参数。）
methods：{

handleClick(id) {

this.$router.push({name:’detail’, // 根据name确定匹配路由params: {id: id}})

}
//或者采用router-link前往Detail页面

《router-link :to="{name: ’detail’, params: { id: 1 }}"》前往Detail页面《/router-link》

对应路由配置：
{

path:’/detail/:id’,

name:’detail’,

component: detail

}  获取参数方式： this.$route.params.id

三、第三种方法：query传参
使用path来匹配路由，然后通过query来传递参数，这种情况下 query传递的参数会显示在url后面?id=？
methods：{

handleClick(id) {

this.$router.push({path:’/detail’,query: {id: id}})

}
对应路由配置：
{

path:’/detail’,

name:’detail’,

component: detail

}  //获取参数：this.$route.query.id
四、总结：params和query中的区别
1、接收方式

query传参：this.$route.query.id

params传参：this.$route.params.id

2、路由展现方式

query传参：/detail?id=1&user=123&identity=1&更多参数

params传参：/detail/123

vue-router 路由动态传参 query和params的区别

/data/:id这个路由匹配/data/1,/data/2这里的 id 叫 params
/data?id=1 /data?id=2 这里的 id 叫 query

当你使用params方法传参的时候，要在路由后面加参数名，并且传参的时候，参数名要跟路由后面设置的参数名对应。使用query方法，就没有这种限制，直接在跳转里面用就可以。
这句话怎么理解呢？看下边：
如果你要使用params传参，那么你的路由页面index.js必须带上参数，如下

如果你要使用query传参，那么你的路由页面index.js必须带上参数，如下

这里看方法3,4,其实是对应方法1,2的，也就是说使用query方法，可以与path和name共用，2个都可以，但是params只能对应name。

要是想获取参数值：各自的获取方法是：
query和params分别是：this. route.params.id

顺便说一些参数是多个的情况
params传参，如果路由index.js如下：

那么跳转写法：this.$router.push({name:’detail’,params:{id:123,name:’lisi’}})
***隐藏网址***
query的写法参考上面。

query跟params，前者在浏览器地址栏中显示参数，后者则不显示。

vue使用props在组件中传输和接收参数

1、在组件中使用props选项定义数据，接收参数；
2、在路由中，使用props选项来进行设置，路由中的props有三种模式：
a、布尔模式：props设置为true,可接收params方式的参数传递；
{
path:"bjc/:name/:price",//定义其属性
component:Bjc,
props:true
},
接收参数：
props: {
keyword: {
type: String,
default: ’’
}
},
在浏览器中的表现形式： www.qijinn.com/item/search/1/2
b、函数模式：props为函数，可接收query方式参数的传递；
路由定义： {
path: ’/items/search/result’,
name: ’search-result’,
meta: {
keepAlive: true
},
component: asyncLoader(’items/search-result’),
props: route =》 route.query
},
传递参数：
this.$router.push({
name: ’search-result’,
query: { keyword: word.trim() }
});
接收参数：
props: {
keyword: {
type: String,
default: ’’
}
},
在浏览器中的表现形式： www.qijinn.com/item/search/result?keyword= 七堇年

c、对象模式：props为对象。如果处理静态数据，可使用对象模式；
{
path:"yc",
component:Yc,
props:{
name:’蜜汁叉烧量版式’,
price:648
}
},

接收参数：
props: {
keyword: {
type: String,
default: ’’
}
},