vue跳转路由

vue中:

方式一:

传递:
this.$router.push({ path: '', query: {  key: value,key: value  } })
接受: this.$route.query.xxx

方式二(此方法传的的参数不会在url地址栏中显示出来):

传参:
this.$router.push({
      name: '', //此处的name值在路由表中的要跳转至那个页面的name值,也是由于nuxt 中路由表乃自动生成,故nuxt中不能用此方法
      params: { key: 'value, key: 32 }
    })
接收 
this.$route.params.xxx

方式三:
须在路由中配置 { path: '/c/:id', name: 'C',component: C }

传this.$router.push('/c/58') 
接收 this.$route.params.id
传this.$router.push('/c') (注意:这种方式不可取)
接收 this.$route.params.id(此时页面的生命周期不会执行)
传  :this.$router.push({ path: `/c/58`,query: {name: '桐梓' } }) 
接收  this.$route.params.id   this.$route.query.xxx
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,083评论 19 139
  • # 传智播客vue 学习## 1. 什么是 Vue.js* Vue 开发手机 APP 需要借助于 Weex* Vu...
    再见天才阅读 3,685评论 0 6
  • 相关概念 混合开发和前后端分离 混合开发(服务器端渲染) 前后端分离后端提供接口,前端开发界面效果(专注于用户的交...
    他爱在黑暗中漫游阅读 2,871评论 4 45
  • 女人现在不努力,未来就是穿不完的地摊货和逛不完的菜市场…… 这句话仿佛成了朋友的励志名言那般,放到了她的朋友圈。 ...
    疯丫80s阅读 322评论 0 4
  • 不想见别人是我不去的理由,对二层人说是因为你去了,可实际上,还是因为不想见那些人。
    夏白空阅读 139评论 0 0