vue路由传值与路由跳转

忘是亡心i 2021-09-16 13:04 602阅读 0赞

### 一、用name传递参数 ###

两步完成用name传值并显示在模板里：

1.  在路由文件src/router/index.js里配置name属性。
    
    <table> 
     <tbody> 
      <tr> 
       <td> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> </td> 
       <td> <p>routes:&nbsp;[</p> <p>&nbsp;&nbsp;&nbsp;&nbsp;{ </p> <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;path:&nbsp;'/',</p> <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name:&nbsp;'Hello',</p> <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;component:&nbsp;Hello</p> <p>&nbsp;&nbsp;&nbsp;&nbsp;}</p> <p>]</p> </td> 
      </tr> 
     </tbody> 
    </table>
2.  模板里(src/App.vue)用$router.name的形势接收，比如直接在模板中显示：
    
    <table> 
     <tbody> 
      <tr> 
       <td> <p>1</p> </td> 
       <td> <p>&lt;p&gt;{ { $router.name}}&lt;/p&gt;</p> <p>&nbsp;</p> </td> 
      </tr> 
     </tbody> 
    </table>

### 二、通过<router-link> 标签中的to传参 ###

也许你也会觉的上边的传参很不正规，也不方便，其实我们多数传参是不用name进行传参的，我们用<router-link>标签中的to属性进行传参，需要您注意的是这里的to要进行一个绑定，写成:to。先来看一下这种传参方法的基本语法：

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> </td> 
   <td> <p>&lt;router-link&nbsp;:to="{name:xxx,params:{key:value}}"&gt;valueString&lt;/router-link&gt;</p> </td> 
  </tr> 
 </tbody> 
</table>

这里的to前边是带冒号的，然后后边跟的是一个对象形势的字符串.

*  name：就是我们在路由配置文件中起的name值。
 *  params：就是我们要传的参数，它也是对象形势，在对象里可以传递多个值。

了解基本的语法后，我们改造一下我们的src/App.vue里的<router-link>标签,我们把hi1页面的<router-link>进行修改。

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> </td> 
   <td> <p>&lt;router-link&nbsp;:to="{name:'hi1',params:{username:'jspang'}}"&gt;Hi页面1&lt;/router-link&gt;</p> </td> 
  </tr> 
 </tbody> 
</table>

把src/reouter/index.js文件里给hi1配置的路由起个name,就叫hi1.

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> </td> 
   <td> <p>{path:'/hi1',name:'hi1',component:Hi1},</p> </td> 
  </tr> 
 </tbody> 
</table>

最后在模板里(src/components/Hi1.vue)用$route.params.username进行接收.

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> </td> 
   <td> <p>{ {$route.params.username}}</p> </td> 
  </tr> 
 </tbody> 
</table>

### 三:冒号的形式传递参数 ###

## ##

1.  在配置文件里以冒号的形式设置参数。我们在/src/router/index.js文件里配置路由。
    
    <table> 
     <tbody> 
      <tr> 
       <td> <p>1</p> <p>2</p> <p>3</p> <p>4</p> </td> 
       <td> <p>{ </p> <p>&nbsp;&nbsp;&nbsp;&nbsp;path:'/params/:newsId/:newsTitle',</p> <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;component:Params</p> <p>}</p> </td> 
      </tr> 
     </tbody> 
    </table>
    
      
    我们需要传递参数是新闻ID（newsId）和新闻标题（newsTitle）.所以我们在路由配置文件里制定了这两个值。
2.  在src/components目录下建立我们params.vue组件，也可以说是页面。我们在页面里输出了url传递的的新闻ID和新闻标题。
    
    <table> 
     <tbody> 
      <tr> 
       <td> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> <p>8</p> <p>9</p> <p>10</p> <p>11</p> <p>12</p> <p>13</p> <p>14</p> <p>15</p> <p>16</p> <p>17</p> <p>18</p> </td> 
       <td> <p>&lt;template&gt;</p> <p>&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt;</p> <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2&gt;{ { msg }}&lt;/h2&gt;</p> <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;新闻ID：{ { $route.params.newsId}}&lt;/p&gt;</p> <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;新闻标题：{ { $route.params.newsTitle}}&lt;/p&gt;</p> <p>&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;</p> <p>&lt;/template&gt;</p> <p>&nbsp;</p> <p>&lt;script&gt;</p> <p>export&nbsp;default&nbsp;{ </p> <p>&nbsp;&nbsp;name:&nbsp;'params',</p> <p>&nbsp;&nbsp;data&nbsp;()&nbsp;{ </p> <p>&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;{ </p> <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;msg:&nbsp;'params page'</p> <p>&nbsp;&nbsp;&nbsp;&nbsp;}</p> <p>&nbsp;&nbsp;}</p> <p>}</p> <p>&lt;/script&gt;</p> </td> 
      </tr> 
     </tbody> 
    </table>
3.  在App.vue文件里加入我们的<router-view>标签。这时候我们可以直接利用url传值了。
    
    <table> 
     <tbody> 
      <tr> 
       <td> <p>1</p> </td> 
       <td> <p>&lt;router-link&nbsp;to="/params/198/jspang website is very good"&gt;params&lt;/router-link&gt;&nbsp;|</p> </td> 
      </tr> 
     </tbody> 
    </table>

## ##

四、传统路由跳转(要解析vue变量:to)

<table> 
 <tbody> 
  <tr> 
   <td> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> </td> 
   <td> <p>&lt;p&gt;导航 ：</p> <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;router-link&nbsp;to="/"&gt;首页&lt;/router-link&gt;&nbsp;|</p> <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;router-link&nbsp;to="/hi"&gt;Hi页面&lt;/router-link&gt;&nbsp;|</p> <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;router-link&nbsp;to="/hi/hi1"&gt;-Hi页面1&lt;/router-link&gt;&nbsp;|</p> <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;router-link&nbsp;to="/hi/hi2"&gt;-Hi页面2&lt;/router-link&gt;</p> <p>&lt;/p&gt;</p> </td> 
  </tr> 
 </tbody> 
</table>

五、编程是导航

前进与后退

### this.$router.go(-1) 和 this.$router.go(1) ###

跳转

### this.$router.push('/xxx ') ###

### eg: ###

<button @click="goHome">回到首页</button>

<table> 
 <tbody> 
  <tr> 
   <td> <p>&lt;button&nbsp;@click="goback"&gt;后退&lt;/button&gt;</p> </td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> <p>8</p> <p>9</p> <p>10</p> <p>11</p> </td> 
   <td> <p>export&nbsp;default&nbsp;{ </p> <p>&nbsp;&nbsp;name:&nbsp;'app',</p> <p>&nbsp;&nbsp;methods:{ </p> <p>&nbsp;&nbsp;&nbsp;&nbsp;goback(){ </p> <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.$router.go(-1);</p> <p>&nbsp;&nbsp;&nbsp;&nbsp;},</p> <p>&nbsp;&nbsp;&nbsp;&nbsp;goHome(){ </p> <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.$router.push('/');</p> <p>&nbsp;&nbsp;&nbsp;&nbsp;}</p> <p>&nbsp;&nbsp;}</p> <p>}</p> </td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td> <p>&lt;button&nbsp;@click="goback"&gt;后退&lt;/button&gt;</p> </td> 
  </tr> 
 </tbody> 
</table>