第一種：props

• 配置：
  組件內(nèi)定義：

  props: ['id']
  

  路由映射配置艘希，開啟props:true :

  {
      path: '/user/:id',
      component: User,
      props: true
  }
  

• 跳轉(zhuǎn)傳參：
  1、標(biāo)簽跳轉(zhuǎn)

  <router-link to="/user/1">第一個</router-link>
  

  2.函數(shù)式跳轉(zhuǎn)：

  getDescribe(id) {
      // 直接調(diào)用$router.push 實(shí)現(xiàn)攜帶參數(shù)的跳轉(zhuǎn)
      this.$router.push({
          path: `/describe/${id}`,
      })
  }
  

• 獲取參數(shù)：

  <div>第一種傳值props： {{ id }}</div>
  

第二種：

• 配置:（url顯示在問號之前）
  路由映射配置：

  {
      path: '/user/:id',
      component: User
  },
  

• 跳轉(zhuǎn)傳參：
  1看政、標(biāo)簽跳轉(zhuǎn)

  <router-link to="/user/1">第二個</router-link>
  

  2.函數(shù)式跳轉(zhuǎn)：

  getDescribe(id) {
      // 直接調(diào)用$router.push 實(shí)現(xiàn)攜帶參數(shù)的跳轉(zhuǎn)
      this.$router.push({
          path: `/user/${id}`,
      })
  }
  

• 獲取參數(shù)：

  <div>第二種傳值$route.params.id： {{$route.params.id}}</div>
  

第三種：（url不顯示參數(shù)）

• 配置：
  路由映射配置：

  {
      path: '/user',
      component: User
  },
  

• 跳轉(zhuǎn)傳參：
  1铁瞒、標(biāo)簽跳轉(zhuǎn)

  <router-link :to="{name:'c', params:{id:1}}">第四個</router-link>
  

  2.函數(shù)式跳轉(zhuǎn)：

  getDescribe(id) {
      // 直接調(diào)用$router.push 實(shí)現(xiàn)攜帶參數(shù)的跳轉(zhuǎn)
      this.$router.push({
          path: `/user`,
          params:{
              id:id
          }
      })
  }
  

• 獲取參數(shù)：

  <div>第三種傳值$route.params.id： {{$route.params.id}}</div>
  

第四種：(url顯示在？之后)

• 配置：
  路由映射配置：

  {
      path: '/user',
      component: User
  },　
  

• 跳轉(zhuǎn)傳參：
  1、標(biāo)簽跳轉(zhuǎn)

  <router-link :to="{name:'c', query:{id:1}}">第四個</router-link>
  

  2.函數(shù)式跳轉(zhuǎn)：

  getDescribe(id) {
      // 直接調(diào)用$router.push 實(shí)現(xiàn)攜帶參數(shù)的跳轉(zhuǎn)
      this.$router.push({
          path: `/user`,
          query:{
              id:id
          }
      })
  }
  

• 獲取參數(shù)：

  <div>第四種傳值$route.query.id： {{$route.query.id}}</div>
  

參考：https://www.cnblogs.com/likewpp/p/10827320.html