路由传参的方式

2020-06-30  本文已影响0人  aE_0ff7

一:

getDescribe(id) {
//   直接调用$router.push 实现携带参数的跳转
        this.$router.push({
          path: `/describe/${id}`,
        })

方案一,需要对应路由配置如下:

  {
     path: '/describe/:id',
     name: 'Describe',
     component: Describe
   }

this.$route.params.id 来获取参数

二:

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

对应路由配置: 这里可以添加:/id 也可以不添加,不添加数据会在url后面显示,不添加数据就不会显示

  {
     path: '/describe',
     name: 'Describe',
     component: Describe
   }

this.$route.params.id 来获取参数

三:

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

使用path来匹配路由,然后通过query来传递参数
这种情况下 query传递的参数会显示在url后面?id=?
对应路由配置:

  {
     path: '/describe',
     name: 'Describe',
     component: Describe
   }
this.$route.query.id 来获取参数

四:router-link to传参

 <router-link class="tag-add" v-else :to="{path:'/bos/register',query: {id: 1}}">选择标签</router-link>

this.$route.query.id 来获取参数

上一篇 下一篇

猜你喜欢

热点阅读