VueJs路由跳转——vue-router的使用详解

た入场券 2022-01-06 01:33 303阅读 0赞

**路由对象和路由匹配**

路由对象，即$router会被注入每个组件中，可以利用它进行一些信息的获取。如

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>$route.path</td> 
   <td>当前路由对象的路径，如'/view/a'</td> 
  </tr> 
  <tr> 
   <td>$rotue.params</td> 
   <td>关于动态片段（如/user/:username)的键值对信息,如{username: 'paolino'}</td> 
  </tr> 
  <tr> 
   <td>$route.query</td> 
   <td>请求参数，如/foo?user=1获取到query.user = 1</td> 
  </tr> 
  <tr> 
   <td>$route.router</td> 
   <td>所属路由器以及所属组件信息</td> 
  </tr> 
  <tr> 
   <td>$route.matched</td> 
   <td>数组，包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。</td> 
  </tr> 
  <tr> 
   <td>$route.name</td> 
   <td>当前路径名字</td> 
  </tr> 
 </tbody> 
</table>

当然，你也可以在自己定义路由规则（map)的时候自定义字段，用以特殊目的。

全匹配片段的语法是使用通配符\* 如，/user/\*any就会匹配到任何以/user为开头的路径，并给params对象中赋值一个属性any

动态片段的语法就是使用:作为标志。

**使用路径名称**

在定义路径规则的时候，如果你给它提供了一个name属性，则可以在后续使用这条路径规则的时候，直接引用。

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div></td> 
   <td> 
    <div> 
     <div> 
      <code>router.map({ </code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>'/user/:userId'</code> 
      <code>: { </code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>name: </code> 
      <code>'user'</code> 
      <code>,</code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>component: {...}</code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>}</code> 
     </div> 
     <div> 
      <code>});</code> 
     </div> 
    </div></td> 
  </tr> 
 </tbody> 
</table>

在v-link中使用

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div></td> 
   <td> 
    <div> 
     <div> 
      <code>&lt;</code> 
      <code>a</code> 
      <code>v-link</code> 
      <code>=</code> 
      <code>"{name: 'user', params: {userId: 1}"</code> 
      <code>&gt;This is a user whose id is 1&lt;/</code> 
      <code>a</code> 
      <code>&gt;</code> 
     </div> 
    </div></td> 
  </tr> 
 </tbody> 
</table>

还可以使用router.go()

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div></td> 
   <td> 
    <div> 
     <div> 
      <code>router.go({name: </code> 
      <code>'user'</code> 
      <code>, params: {userId: 1}});</code> 
     </div> 
    </div></td> 
  </tr> 
 </tbody> 
</table>

最终都会匹配到/user/1这条路径上

**路由选项**

<table> 
 <thead> 
  <tr> 
   <th>路由选项名</th> 
   <th>默认值</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>hashbang</td> 
   <td>true</td> 
   <td>将路径格式化为#!开头</td> 
  </tr> 
  <tr> 
   <td>history</td> 
   <td>false</td> 
   <td>启用HTML5 history模式，可以使用pushState和replaceState来管理记录</td> 
  </tr> 
  <tr> 
   <td>abstract</td> 
   <td>false</td> 
   <td>使用一个不依赖于浏览器的浏览历史虚拟管理后端。</td> 
  </tr> 
  <tr> 
   <td>transitionOnLoad</td> 
   <td>false</td> 
   <td>初次加载是否启用场景切换</td> 
  </tr> 
  <tr> 
   <td>saveScrollPosition</td> 
   <td>false</td> 
   <td>在启用html5 history模式的时候生效，用于后退操作的时候记住之前的滚动条位置</td> 
  </tr> 
  <tr> 
   <td>linkActiveClass</td> 
   <td>"v-link-active"</td> 
   <td>链接被点击时候需要添加到v-link元素上的class类,默认为active</td> 
  </tr> 
 </tbody> 
</table>

如，我想采用一个有路径格式化并启用Html5 history功能的路由器，则可以在路由器初始化的时候，指定这些参数：

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div></td> 
   <td> 
    <div> 
     <div> 
      <code>var</code> 
      <code>router = </code> 
      <code>new</code> 
      <code>VueRouter({ </code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>hashbang: </code> 
      <code>true</code> 
      <code>,</code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>history: </code> 
      <code>true</code> 
     </div> 
     <div> 
      <code>});</code> 
     </div> 
    </div></td> 
  </tr> 
 </tbody> 
</table>

这里只是做了一些简单的介绍，最后，更多高级用法请参考官方文档。