【vue】vue跳转页面传递参数

水深无声 2022-11-04 01:39 86阅读 0赞

前言

自己每次用的时候，都是百度，找到合适的要半天，所以就找一篇好点的搬运过来了。
转载自：https://blog.csdn.net/qi_dabin/article/details/82454588
文档2：https://www.jb51.net/article/201173.htm

注意事项

  1. 跳转是通过tourer，获取参数通过route！！
  2. 传参：query刷新后不会丢失，但是必须query：{}，对应的是一个对象; params传参刷新后会丢失

第一种：push

跳转

  1. this.$router.push({ 
  2. path: `/describe/${ id}`,
  3. })

路由配置

  1. { 
  2. path: '/describe/:id',
  3. name: 'Describe',
  4. component: Describe
  5. }

获取参数

  1. this.$route.params.id

第二种：name

跳转

  1. this.$router.push({ 
  2.     name: 'Describe',
  3.     params: { 
  4.         id: id
  5.     }
  6. })

路由

  1. { 
  2.     path: '/describe',
  3.     name: 'Describe',
  4.     component: Describe
  5. }

获取参数

  1. this.$route.params.id

第三种：path

跳转

  1. this.$router.push({ 
  2.     path: '/describe',
  3.     query: { 
  4.         id: id
  5.     }
  6. })

路由

  1. { 
  2.     path: '/describe',
  3.     name: 'Describe',
  4.     component: Describe
  5. }

获取参数

  1. this.$route.query.id

发表评论

表情：
评论列表 （有 0 条评论，86人围观）

还没有评论，来说两句吧...

相关阅读