vue router进行路由跳转并携带参数(params/query) |
您所在的位置:网站首页 › 0pp0a58参数 › vue router进行路由跳转并携带参数(params/query) |
在使用`router.push`进行路由跳转到另一个组件时,可以通过`params`或`query`来传递参数。
1. 使用`params`传参: // 在路由跳转时传递参数 router.push({ name: 'targetComponent', params: { paramName: paramValue // 参数名和值 } }); // 在目标组件中通过$route.params获取参数值 this.$route.params.paramName2. 使用`query`传参: // 在路由跳转时传递参数 router.push({ name: 'targetComponent', query: { paramName: paramValue // 参数名和值 } }); // 在目标组件中通过$route.query获取参数值 this.$route.query.paramName需要注意的是,`params`传参会将参数添加到URL路径中,而`query`传参则会将参数添加到URL的查询字符串中。根据具体需求选择适合的方式进行参数传递。 二者的区别:`params`和`query`是Vue Router中用于传递参数的两种方式,它们有以下区别: 1. URL形式: - `params`传参:参数会以占位符的形式添加到URL路径中,例如:`/targetComponent/:paramName` - `query`传参:参数会以键值对的形式添加到URL的查询字符串中,例如:`/targetComponent?paramName=paramValue` 2. 参数的可见性: - `params`传参:参数在URL中不直接暴露,不会修改URL路径,适合传递敏感数据。 - `query`传参:参数会在URL中暴露,可以被查看和修改,适合传递非敏感数据。 3. 参数的传递方式: - `params`传参:参数通过路由的`params`属性进行传递,传递的参数是一个对象。 - `query`传参:参数通过路由的`query`属性进行传递,传递的参数是一个键值对的对象。 4. 路由配置: - `params`传参:需要在路由配置中定义参数的名称,以冒号开头,例如:`path: '/targetComponent/:paramName'` - `query`传参:不需要在路由配置中定义参数,可以直接使用。 需要根据具体的需求选择适合的方式进行参数传递。如果参数需要在URL中暴露或需要保留在浏览器的历史记录中,可以使用`params`传参;如果参数是一些临时的、非敏感的数据,可以使用`query`传参。 可以在传递参数时先JSON.stringify,取值时JSON.parse解析 举例: // 传递时 this.$router.push({ path: "/screen/project", query: { paramName: JSON.stringify(this.paramValue) } }); // 接收时 JSON.parse(this.$route.query.paramName); |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |