vue中路由传参的三种方式

男娘i 2022-08-29 00:11 227阅读 0赞

** 第一种， 第三种方法 页面刷新数据不会丢失; 第二种方法 页面刷新数据会丢失;**

<table> 
 <thead> 
  <tr> 
   <th style="width:67px;">方式</th> 
   <th style="width:284px;">跳转方式</th> 
   <th style="width:258px;">对应路由</th> 
   <th style="width:277px;">获取参数方式</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td style="width:67px;">第一种</td> 
   <td style="width:284px;"> <pre><code>//直接调用$router.push 实现携带参数的跳转
        this.$router.push({
          path: `/particulars/${id}`,
        })</code></pre> </td> 
   <td style="width:258px;"> <pre><code>{
  path: '/particulars/:id',
  name: 'particulars',
  component: particulars
}</code></pre> </td> 
   <td style="width:277px;"> <pre><code>this.$route.params.id</code></pre> </td> 
  </tr> 
  <tr> 
   <td style="width:67px;">第二种</td> 
   <td style="width:284px;"> <pre><code>this.$router.push({
          name: 'particulars',
          params: {
            id: id
          }
        })</code></pre> </td> 
   <td style="width:258px;"> <pre><code>{
     path: '/particulars',
     name: 'particulars',
     component: particulars
   }</code></pre> </td> 
   <td style="width:277px;"> <pre><code>this.$route.params.id</code></pre> </td> 
  </tr> 
  <tr> 
   <td style="width:67px;">第三种</td> 
   <td style="width:284px;"> <pre><code>this.$router.push({
          path: '/particulars',
          query: {
            id: id
          }
        })</code></pre> </td> 
   <td style="width:258px;"> <pre><code>{
     path: '/particulars',
     name: 'particulars',
     component: particulars
   }</code></pre> </td> 
   <td style="width:277px;"> <pre><code>this.$route.query.id</code></pre> </td> 
  </tr> 
 </tbody> 
</table>

组件中 获取参数的时候是    route.params   这很重要~~~