详解新手使用vue-router传参时注意事项

更新时间：2019年06月06日 11:18:51 作者：JoySang

这篇文章主要介绍了详解新手使用vue-router传参时注意事项，详细的介绍了几种常见错误，需要的朋友们下面随着小编来一起学习学习吧

1. 使用name和params组合传参

this.$router.push({name: 'details', params: {'id': 233}})

路由配置

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/details',
      name: 'details',
      component: resolve => require(['../components/details'], resolve)
    }
  ]
})

获取参数

this.$route.params.id // 233

刷新参数丢失显示 undefined

this.$route.params.id // undefined

注意：此方法第一次跳转是没有问题的，参数也可以传过去，但是刷新页面后，参数就没了 (ps: 这个地方其实还有一个问题，当你传递的参数是number类型，第一次是没有问题的，获取的时候也是number类型，但是当你刷新页面后，number变成string类型，如果涉及计算的建议先类型转换一下)

第一次是预期结果 // 234

console.log(this.$route.params.id + 1)

刷新页面后直接字符串拼接了 // 2331

参数丢失解决方案：

routes: [
    {
      path: '/details/:id', // 这里配置的要和你传递的参数名保持一致
      name: 'details',
      component: resolve => require(['../components/details'], resolve)
    }
  ]

2. path和query组合传参

this.$router.push({path: '/details', query: {id: 666}})

this.$route.query.id // 666

此方法参数会跟在问号后面例如：/details?id=666，该方法刷新页面不会丢失参数

最后：根据自己的项目选择合适的传参方式

官方文档vue-router

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

element中async-validator异步请求验证使用
本文主要介绍了element中async-validator异步请求验证使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-05-05
Vue 清除Form表单校验信息的解决方法(清除表单验证上次提示信息)
这篇文章主要介绍了Vue 清除Form表单校验信息的解决方法(清除表单验证上次提示信息),本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-04-04
快速解决Error: error:0308010C:digital envelope ro
因为 node.js V17版本中最近发布的OpenSSL3.0, 而OpenSSL3.0对允许算法和密钥大小增加了严格的限制,下面通过本文给大家分享快速解决Error: error:0308010C:digital envelope routines::unsupported的三种解决方案,感兴趣的朋友一起看看吧
2024-02-02
vue electron应用调exe程序的实现步骤
这篇文章主要介绍了vue electron应用调exe程序的实现步骤,用Python写了一个本地服务编译成exe程序,在electron程序启动后,自动执行exe程序,文中有详细的代码示例供大家参考,需要的朋友可以参考下
2024-02-02
Vue3 使用v-md-editor如何动态上传图片的方法实现
本文主要介绍了Vue3 使用v-md-editor如何动态上传图片，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-08-08
vue项目element UI 版本升级过程遇到的问题及解决方案
这篇文章主要介绍了vue项目element UI 版本升级过程遇到的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-01-01
详解Vue3中的watch侦听器和watchEffect高级侦听器
这篇文章主要介绍了Vue3中的watch侦听器和watchEffect高级侦听器,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-08-08
vue + element-ui实现简洁的导入导出功能
Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint UI，下面这篇文章主要给大家介绍了关于利用vue + element-ui如何实现简洁的导入导出功能的相关资料，需要的朋友可以参考下。
2017-12-12
详解vue-cli + webpack 多页面实例配置优化方法
本篇文章主要介绍了详解vue-cli + webpack 多页面实例配置优化方法，具有一定的参考价值，有兴趣的可以了解一下
2017-07-07
详解vue-router 2.0 常用基础知识点之router-link
这篇文章主要介绍了详解vue-router 2.0 常用基础知识点之router-link，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-05-05