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

网络编程 2021-07-04 15:50www.168986.cn编程入门
这篇文章主要介绍了详解新手使用vue-router传参时注意事项,详细的介绍了几种常见错误,需要的朋友们狼蚁网站SEO优化随着长沙网络推广来一起学习学习吧

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',
      ponent: resolve => require(['../ponents/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',
      ponent: resolve => require(['../ponents/details'], resolve)
    }
  ]

2. path和query组合传参

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

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

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

官方文档

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持狼蚁SEO。

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by