vue路由传值与路由跳转

迷南。 2022-05-28 12:57 242阅读 0赞

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

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

1.  在路由文件src/router/index.js里配置name属性。  
    
    
    <table style="font-size:12px;margin-left:0px;border-spacing:0px;background:none;border:none;padding:0px;margin-right:0px;margin-bottom:0px;margin-top:0px;width:auto;table-layout:auto;"> 
     <tbody> 
      <tr style="background:0px center;padding:0px;border-style:none;vertical-align:top;margin:0px;"> 
       <td style="border-width:0px;background-position:0px center;padding:0px;font-family:'Droid Sans Mono', DroidSansMonoRegular, 'Courier New', monospace;vertical-align:top;margin:0px;background-color:rgb(238,238,238);"> 
        <div style="background:0px center;border:0px;padding-right:0px;padding-left:0px;margin:0px;white-space:nowrap;padding-top:5px;padding-bottom:3px;font-size:12px;line-height:15px;"> 
         <div style="font-family:inherit;background:0px center;border-top:0px;border-bottom:0px;border-left:0px;padding:0px 5px;margin:0px;height:inherit;border-right:1px solid rgb(222,222,222);text-align:right;min-width:1.2em;color:rgb(170,170,170);">
           1 
         </div> 
         <div style="font-family:inherit;background:0px center;border-top:0px;border-bottom:0px;border-left:0px;padding:0px 5px;margin:0px;height:inherit;border-right:1px solid rgb(222,222,222);text-align:right;min-width:1.2em;color:rgb(170,170,170);">
           2 
         </div> 
         <div style="font-family:inherit;background:0px center;border-top:0px;border-bottom:0px;border-left:0px;padding:0px 5px;margin:0px;height:inherit;border-right:1px solid rgb(222,222,222);text-align:right;min-width:1.2em;color:rgb(170,170,170);">
           3 
         </div> 
         <div style="font-family:inherit;background:0px center;border-top:0px;border-bottom:0px;border-left:0px;padding:0px 5px;margin:0px;height:inherit;border-right:1px solid rgb(222,222,222);text-align:right;min-width:1.2em;color:rgb(170,170,170);">
           4 
         </div> 
         <div style="font-family:inherit;background:0px center;border-top:0px;border-bottom:0px;border-left:0px;padding:0px 5px;margin:0px;height:inherit;border-right:1px solid rgb(222,222,222);text-align:right;min-width:1.2em;color:rgb(170,170,170);">
           5 
         </div> 
         <div style="font-family:inherit;background:0px center;border-top:0px;border-bottom:0px;border-left:0px;padding:0px 5px;margin:0px;height:inherit;border-right:1px solid rgb(222,222,222);text-align:right;min-width:1.2em;color:rgb(170,170,170);">
           6 
         </div> 
         <div style="font-family:inherit;background:0px center;border-top:0px;border-bottom:0px;border-left:0px;padding:0px 5px;margin:0px;height:inherit;border-right:1px solid rgb(222,222,222);text-align:right;min-width:1.2em;color:rgb(170,170,170);">
           7 
         </div> 
        </div></td> 
       <td style="border-width:0px;background:0px center;width:707px;padding:0px;font-family:'Droid Sans Mono', DroidSansMonoRegular, 'Courier New', monospace;vertical-align:top;margin:0px;"> 
        <div style="padding-right:0px;padding-left:0px;margin:0px;color:rgb(0,0,0);white-space:pre;background:none;border:none;padding-top:5px;padding-bottom:3px;font-size:12px;line-height:15px;"> 
         <div style="font-family:inherit;background:0px center;border:0px;padding:0px 5px;margin:0px;height:inherit;"> 
          <span style="font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
          <span style="font-family:inherit;height:inherit;color:rgb(0,45,122);">routes</span> 
          <span style="font-family:inherit;height:inherit;color:rgb(0,111,224);">:</span> 
          <span style="font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
          <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">[</span> 
         </div> 
         <div style="font-family:inherit;background:0px center;border:0px;padding:0px 5px;margin:0px;height:inherit;"> 
          <span style="font-family:inherit;height:inherit;color:rgb(0,111,224);">&nbsp;&nbsp;&nbsp;&nbsp;</span> 
          <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">{ </span> 
         </div> 
         <div style="font-family:inherit;background:0px center;border:0px;padding:0px 5px;margin:0px;height:inherit;"> 
          <span style="font-family:inherit;height:inherit;color:rgb(0,111,224);">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
          <span style="font-family:inherit;height:inherit;color:rgb(0,45,122);">path</span> 
          <span style="font-family:inherit;height:inherit;color:rgb(0,111,224);">:</span> 
          <span style="font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
          <span style="font-family:inherit;height:inherit;color:rgb(221,17,68);">'/'</span> 
          <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">,</span> 
         </div> 
         <div style="font-family:inherit;background:0px center;border:0px;padding:0px 5px;margin:0px;height:inherit;"> 
          <span style="font-family:inherit;height:inherit;color:rgb(0,111,224);">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
          <span style="font-family:inherit;height:inherit;color:rgb(0,45,122);">name</span> 
          <span style="font-family:inherit;height:inherit;color:rgb(0,111,224);">:</span> 
          <span style="font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
          <span style="font-family:inherit;height:inherit;color:rgb(221,17,68);">'Hello'</span> 
          <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">,</span> 
         </div> 
         <div style="font-family:inherit;background:0px center;border:0px;padding:0px 5px;margin:0px;height:inherit;"> 
          <span style="font-family:inherit;height:inherit;color:rgb(0,111,224);">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
          <span style="font-family:inherit;height:inherit;color:rgb(0,45,122);">component</span> 
          <span style="font-family:inherit;height:inherit;color:rgb(0,111,224);">:</span> 
          <span style="font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
          <span style="font-family:inherit;height:inherit;">Hello</span> 
         </div> 
         <div style="font-family:inherit;background:0px center;border:0px;padding:0px 5px;margin:0px;height:inherit;"> 
          <span style="font-family:inherit;height:inherit;color:rgb(0,111,224);">&nbsp;&nbsp;&nbsp;&nbsp;</span> 
          <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">}</span> 
         </div> 
         <div style="font-family:inherit;background:0px center;border:0px;padding:0px 5px;margin:0px;height:inherit;"> 
          <span style="font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
          <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">]</span> 
         </div> 
        </div></td> 
      </tr> 
     </tbody> 
    </table>
2.  模板里(src/App.vue)用$router.name的形势接收，比如直接在模板中显示：  
    
    
    <table style="font-size:12px;margin-left:0px;border-spacing:0px;background:none;border:none;padding:0px;margin-right:0px;margin-bottom:0px;margin-top:0px;width:auto;table-layout:auto;"> 
     <tbody> 
      <tr style="background:0px center;padding:0px;border-style:none;vertical-align:top;margin:0px;"> 
       <td style="border-width:0px;background-position:0px center;padding:0px;font-family:'Droid Sans Mono', DroidSansMonoRegular, 'Courier New', monospace;vertical-align:top;margin:0px;background-color:rgb(238,238,238);"> 
        <div style="background:0px center;border:0px;padding-right:0px;padding-left:0px;margin:0px;white-space:nowrap;padding-top:5px;padding-bottom:3px;font-size:12px;line-height:15px;"> 
         <div style="font-family:inherit;background:0px center;border-top:0px;border-bottom:0px;border-left:0px;padding:0px 5px;margin:0px;height:inherit;border-right:1px solid rgb(222,222,222);text-align:right;min-width:1.2em;color:rgb(170,170,170);">
           1 
         </div> 
        </div></td> 
       <td style="border-width:0px;background:0px center;width:707px;padding:0px;font-family:'Droid Sans Mono', DroidSansMonoRegular, 'Courier New', monospace;vertical-align:top;margin:0px;"> 
        <div style="padding-right:0px;padding-left:0px;margin:0px;color:rgb(0,0,0);white-space:pre;background:none;border:none;padding-top:5px;padding-bottom:3px;font-size:12px;line-height:15px;"> 
         <div style="font-family:inherit;background:0px center;border:0px;padding:0px 5px;margin:0px;height:inherit;"> 
          <span style="font-family:inherit;height:inherit;font-weight:bold;">&lt;p&gt;</span> 
          <span style="font-family:inherit;height:inherit;">{ { $router.name}}</span> 
          <span style="font-family:inherit;height:inherit;font-weight:bold;">&lt;/p&gt;</span> 
         </div> 
         <div> 
          <span style="font-family:inherit;height:inherit;font-weight:bold;"><br></span> 
         </div> 
        </div></td> 
      </tr> 
     </tbody> 
    </table>

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

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

<table style="font-size:12px;margin-left:0px;border-spacing:0px;background:none;border:none;padding:0px;margin-right:0px;margin-bottom:0px;margin-top:0px;width:auto;table-layout:auto;"> 
 <tbody> 
  <tr style="background:0px center;padding:0px;border-style:none;vertical-align:top;margin:0px;"> 
   <td style="border-width:0px;background-position:0px center;padding:0px;font-family:'Droid Sans Mono', DroidSansMonoRegular, 'Courier New', monospace;vertical-align:top;margin:0px;background-color:rgb(238,238,238);"> 
    <div style="background:0px center;border:0px;padding-right:0px;padding-left:0px;margin:0px;white-space:nowrap;padding-top:5px;padding-bottom:3px;font-size:12px;line-height:15px;"> 
     <div style="font-family:inherit;background:0px center;border-top:0px;border-bottom:0px;border-left:0px;padding:0px 5px;margin:0px;height:inherit;border-right:1px solid rgb(222,222,222);text-align:right;min-width:1.2em;color:rgb(170,170,170);">
       1 
     </div> 
    </div></td> 
   <td style="border-width:0px;background:0px center;width:757px;padding:0px;font-family:'Droid Sans Mono', DroidSansMonoRegular, 'Courier New', monospace;vertical-align:top;margin:0px;"> 
    <div style="padding-right:0px;padding-left:0px;margin:0px;color:rgb(0,0,0);white-space:pre;background:none;border:none;padding-top:5px;padding-bottom:3px;font-size:12px;line-height:15px;"> 
     <div style="font-family:inherit;background:0px center;border:0px;padding:0px 5px;margin:0px;height:inherit;"> 
      <span style="font-family:inherit;height:inherit;font-weight:bold;">&lt;router-link </span> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,111,224);">:</span> 
      <span style="font-family:inherit;height:inherit;color:#008080;">to</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,111,224);">=</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(221,17,68);">"{name:xxx,params:{key:value}}"</span> 
      <span style="font-family:inherit;height:inherit;font-weight:bold;">&gt;</span> 
      <span style="font-family:inherit;height:inherit;">valueString</span> 
      <span style="font-family:inherit;height:inherit;font-weight:bold;">&lt;/router-link&gt;</span> 
     </div> 
    </div></td> 
  </tr> 
 </tbody> 
</table>

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

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

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

<table style="font-size:12px;margin-left:0px;border-spacing:0px;background:none;border:none;padding:0px;margin-right:0px;margin-bottom:0px;margin-top:0px;width:auto;table-layout:auto;"> 
 <tbody> 
  <tr style="background:0px center;padding:0px;border-style:none;vertical-align:top;margin:0px;"> 
   <td style="border-width:0px;background-position:0px center;padding:0px;font-family:'Droid Sans Mono', DroidSansMonoRegular, 'Courier New', monospace;vertical-align:top;margin:0px;background-color:rgb(238,238,238);"> 
    <div style="background:0px center;border:0px;padding-right:0px;padding-left:0px;margin:0px;white-space:nowrap;padding-top:5px;padding-bottom:3px;font-size:12px;line-height:15px;"> 
     <div style="font-family:inherit;background:0px center;border-top:0px;border-bottom:0px;border-left:0px;padding:0px 5px;margin:0px;height:inherit;border-right:1px solid rgb(222,222,222);text-align:right;min-width:1.2em;color:rgb(170,170,170);">
       1 
     </div> 
    </div></td> 
   <td style="border-width:0px;background:0px center;width:757px;padding:0px;font-family:'Droid Sans Mono', DroidSansMonoRegular, 'Courier New', monospace;vertical-align:top;margin:0px;"> 
    <div style="padding-right:0px;padding-left:0px;margin:0px;color:rgb(0,0,0);white-space:pre;background:none;border:none;padding-top:5px;padding-bottom:3px;font-size:12px;line-height:15px;"> 
     <div style="font-family:inherit;background:0px center;border:0px;padding:0px 5px;margin:0px;height:inherit;"> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="font-family:inherit;height:inherit;font-weight:bold;">&lt;router-link </span> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,111,224);">:</span> 
      <span style="font-family:inherit;height:inherit;color:#008080;">to</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,111,224);">=</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(221,17,68);">"{name:'hi1',params:{username:'jspang'}}"</span> 
      <span style="font-family:inherit;height:inherit;font-weight:bold;">&gt;</span> 
      <span style="font-family:inherit;height:inherit;">Hi页面1</span> 
      <span style="font-family:inherit;height:inherit;font-weight:bold;">&lt;/router-link&gt;</span> 
     </div> 
    </div></td> 
  </tr> 
 </tbody> 
</table>

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

<table style="font-size:12px;margin-left:0px;border-spacing:0px;background:none;border:none;padding:0px;margin-right:0px;margin-bottom:0px;margin-top:0px;width:auto;table-layout:auto;"> 
 <tbody> 
  <tr style="background:0px center;padding:0px;border-style:none;vertical-align:top;margin:0px;"> 
   <td style="border-width:0px;background-position:0px center;padding:0px;font-family:'Droid Sans Mono', DroidSansMonoRegular, 'Courier New', monospace;vertical-align:top;margin:0px;background-color:rgb(238,238,238);"> 
    <div style="background:0px center;border:0px;padding-right:0px;padding-left:0px;margin:0px;white-space:nowrap;padding-top:5px;padding-bottom:3px;font-size:12px;line-height:15px;"> 
     <div style="font-family:inherit;background:0px center;border-top:0px;border-bottom:0px;border-left:0px;padding:0px 5px;margin:0px;height:inherit;border-right:1px solid rgb(222,222,222);text-align:right;min-width:1.2em;color:rgb(170,170,170);">
       1 
     </div> 
    </div></td> 
   <td style="border-width:0px;background:0px center;width:757px;padding:0px;font-family:'Droid Sans Mono', DroidSansMonoRegular, 'Courier New', monospace;vertical-align:top;margin:0px;"> 
    <div style="padding-right:0px;padding-left:0px;margin:0px;color:rgb(0,0,0);white-space:pre;background:none;border:none;padding-top:5px;padding-bottom:3px;font-size:12px;line-height:15px;"> 
     <div style="font-family:inherit;background:0px center;border:0px;padding:0px 5px;margin:0px;height:inherit;"> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">{ </span> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,45,122);">path</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,111,224);">:</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(221,17,68);">'/hi1'</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">,</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,45,122);">name</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,111,224);">:</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(221,17,68);">'hi1'</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">,</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,45,122);">component</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,111,224);">:</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,45,122);">Hi1</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">}</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">,</span> 
     </div> 
    </div></td> 
  </tr> 
 </tbody> 
</table>

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

<table style="font-size:12px;margin-left:0px;border-spacing:0px;background:none;border:none;padding:0px;margin-right:0px;margin-bottom:0px;margin-top:0px;width:auto;table-layout:auto;"> 
 <tbody> 
  <tr style="background:0px center;padding:0px;border-style:none;vertical-align:top;margin:0px;"> 
   <td style="border-width:0px;background-position:0px center;padding:0px;font-family:'Droid Sans Mono', DroidSansMonoRegular, 'Courier New', monospace;vertical-align:top;margin:0px;background-color:rgb(238,238,238);"> 
    <div style="background:0px center;border:0px;padding-right:0px;padding-left:0px;margin:0px;white-space:nowrap;padding-top:5px;padding-bottom:3px;font-size:12px;line-height:15px;"> 
     <div style="font-family:inherit;background:0px center;border-top:0px;border-bottom:0px;border-left:0px;padding:0px 5px;margin:0px;height:inherit;border-right:1px solid rgb(222,222,222);text-align:right;min-width:1.2em;color:rgb(170,170,170);">
       1 
     </div> 
    </div></td> 
   <td style="border-width:0px;background:0px center;width:757px;padding:0px;font-family:'Droid Sans Mono', DroidSansMonoRegular, 'Courier New', monospace;vertical-align:top;margin:0px;"> 
    <div style="padding-right:0px;padding-left:0px;margin:0px;color:rgb(0,0,0);white-space:pre;background:none;border:none;padding-top:5px;padding-bottom:3px;font-size:12px;line-height:15px;"> 
     <div style="font-family:inherit;background:0px center;border:0px;padding:0px 5px;margin:0px;height:inherit;"> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">{ </span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">{ </span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">$</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,45,122);">route</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">.</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,45,122);">params</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">.</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,45,122);">username</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">}</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">}</span> 
     </div> 
    </div></td> 
  </tr> 
 </tbody> 
</table>

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

###  ###

1.  在配置文件里以冒号的形式设置参数。我们在/src/router/index.js文件里配置路由。  
    
    
    <table style="font-size:12px;margin-left:0px;border-spacing:0px;background:none;border:none;padding:0px;margin-right:0px;margin-bottom:0px;margin-top:0px;width:auto;table-layout:auto;"> 
     <tbody> 
      <tr style="background:0px center;padding:0px;border-style:none;vertical-align:top;margin:0px;"> 
       <td style="border-width:0px;background-position:0px center;padding:0px;font-family:'Droid Sans Mono', DroidSansMonoRegular, 'Courier New', monospace;vertical-align:top;margin:0px;background-color:rgb(238,238,238);"> 
        <div style="background:0px center;border:0px;padding-right:0px;padding-left:0px;margin:0px;white-space:nowrap;padding-top:5px;padding-bottom:3px;font-size:12px;line-height:15px;"> 
         <div style="font-family:inherit;background:0px center;border-top:0px;border-bottom:0px;border-left:0px;padding:0px 5px;margin:0px;height:inherit;border-right:1px solid rgb(222,222,222);text-align:right;min-width:1.2em;color:rgb(170,170,170);">
           1 
         </div> 
         <div style="font-family:inherit;background:0px center;border-top:0px;border-bottom:0px;border-left:0px;padding:0px 5px;margin:0px;height:inherit;border-right:1px solid rgb(222,222,222);text-align:right;min-width:1.2em;color:rgb(170,170,170);">
           2 
         </div> 
         <div style="font-family:inherit;background:0px center;border-top:0px;border-bottom:0px;border-left:0px;padding:0px 5px;margin:0px;height:inherit;border-right:1px solid rgb(222,222,222);text-align:right;min-width:1.2em;color:rgb(170,170,170);">
           3 
         </div> 
         <div style="font-family:inherit;background:0px center;border-top:0px;border-bottom:0px;border-left:0px;padding:0px 5px;margin:0px;height:inherit;border-right:1px solid rgb(222,222,222);text-align:right;min-width:1.2em;color:rgb(170,170,170);">
           4 
         </div> 
        </div></td> 
       <td style="border-width:0px;background:0px center;width:707px;padding:0px;font-family:'Droid Sans Mono', DroidSansMonoRegular, 'Courier New', monospace;vertical-align:top;margin:0px;"> 
        <div style="padding-right:0px;padding-left:0px;margin:0px;color:rgb(0,0,0);white-space:pre;background:none;border:none;padding-top:5px;padding-bottom:3px;font-size:12px;line-height:15px;"> 
         <div style="font-family:inherit;background:0px center;border:0px;padding:0px 5px;margin:0px;height:inherit;"> 
          <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">{ </span> 
         </div> 
         <div style="font-family:inherit;background:0px center;border:0px;padding:0px 5px;margin:0px;height:inherit;"> 
          <span style="font-family:inherit;height:inherit;color:rgb(0,111,224);">&nbsp;&nbsp;&nbsp;&nbsp;</span> 
          <span style="font-family:inherit;height:inherit;color:rgb(0,45,122);">path</span> 
          <span style="font-family:inherit;height:inherit;color:rgb(0,111,224);">:</span> 
          <span style="font-family:inherit;height:inherit;color:rgb(221,17,68);">'/params/:newsId/:newsTitle'</span> 
          <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">,</span> 
         </div> 
         <div style="font-family:inherit;background:0px center;border:0px;padding:0px 5px;margin:0px;height:inherit;"> 
          <span style="font-family:inherit;height:inherit;color:rgb(0,111,224);">&nbsp;&nbsp;&nbsp;&nbsp; </span> 
          <span style="font-family:inherit;height:inherit;color:rgb(0,45,122);">component</span> 
          <span style="font-family:inherit;height:inherit;color:rgb(0,111,224);">:</span> 
          <span style="font-family:inherit;height:inherit;">Params</span> 
         </div> 
         <div style="font-family:inherit;background:0px center;border:0px;padding:0px 5px;margin:0px;height:inherit;"> 
          <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">}</span> 
         </div> 
        </div></td> 
      </tr> 
     </tbody> 
    </table>
    
      
    我们需要传递参数是新闻ID（newsId）和新闻标题（newsTitle）.所以我们在路由配置文件里制定了这两个值。
2.  在src/components目录下建立我们params.vue组件，也可以说是页面。我们在页面里输出了url传递的的新闻ID和新闻标题。  
    
    
    <table style="font-size:12px;margin-left:0px;border-spacing:0px;background:none;border:none;padding:0px;margin-right:0px;margin-bottom:0px;margin-top:0px;width:auto;table-layout:auto;"> 
     <tbody> 
      <tr style="background:0px center;padding:0px;border-style:none;vertical-align:top;margin:0px;"> 
       <td style="border-width:0px;background-position:0px center;padding:0px;font-family:'Droid Sans Mono', DroidSansMonoRegular, 'Courier New', monospace;vertical-align:top;margin:0px;background-color:rgb(238,238,238);"> 
        <div style="background:0px center;border:0px;padding-right:0px;padding-left:0px;margin:0px;white-space:nowrap;padding-top:5px;padding-bottom:3px;font-size:12px;line-height:15px;"> 
         <div style="font-family:inherit;background:0px center;border-top:0px;border-bottom:0px;border-left:0px;padding:0px 5px;margin:0px;height:inherit;border-right:1px solid rgb(222,222,222);text-align:right;min-width:1.2em;color:rgb(170,170,170);">
           1 
         </div> 
         <div style="font-family:inherit;background:0px center;border-top:0px;border-bottom:0px;border-left:0px;padding:0px 5px;margin:0px;height:inherit;border-right:1px solid rgb(222,222,222);text-align:right;min-width:1.2em;color:rgb(170,170,170);">
           2 
         </div> 
         <div style="font-family:inherit;background:0px center;border-top:0px;border-bottom:0px;border-left:0px;padding:0px 5px;margin:0px;height:inherit;border-right:1px solid rgb(222,222,222);text-align:right;min-width:1.2em;color:rgb(170,170,170);">
           3 
         </div> 
         <div style="font-family:inherit;background:0px center;border-top:0px;border-bottom:0px;border-left:0px;padding:0px 5px;margin:0px;height:inherit;border-right:1px solid rgb(222,222,222);text-align:right;min-width:1.2em;color:rgb(170,170,170);">
           4 
         </div> 
         <div style="font-family:inherit;background:0px center;border-top:0px;border-bottom:0px;border-left:0px;padding:0px 5px;margin:0px;height:inherit;border-right:1px solid rgb(222,222,222);text-align:right;min-width:1.2em;color:rgb(170,170,170);">
           5 
         </div> 
         <div style="font-family:inherit;background:0px center;border-top:0px;border-bottom:0px;border-left:0px;padding:0px 5px;margin:0px;height:inherit;border-right:1px solid rgb(222,222,222);text-align:right;min-width:1.2em;color:rgb(170,170,170);">
           6 
         </div> 
         <div style="font-family:inherit;background:0px center;border-top:0px;border-bottom:0px;border-left:0px;padding:0px 5px;margin:0px;height:inherit;border-right:1px solid rgb(222,222,222);text-align:right;min-width:1.2em;color:rgb(170,170,170);">
           7 
         </div> 
         <div style="font-family:inherit;background:0px center;border-top:0px;border-bottom:0px;border-left:0px;padding:0px 5px;margin:0px;height:inherit;border-right:1px solid rgb(222,222,222);text-align:right;min-width:1.2em;color:rgb(170,170,170);">
           8 
         </div> 
         <div style="font-family:inherit;background:0px center;border-top:0px;border-bottom:0px;border-left:0px;padding:0px 5px;margin:0px;height:inherit;border-right:1px solid rgb(222,222,222);text-align:right;min-width:1.2em;color:rgb(170,170,170);">
           9 
         </div> 
         <div style="font-family:inherit;background:0px center;border-top:0px;border-bottom:0px;border-left:0px;padding:0px 5px;margin:0px;height:inherit;border-right:1px solid rgb(222,222,222);text-align:right;min-width:1.2em;color:rgb(170,170,170);">
           10 
         </div> 
         <div style="font-family:inherit;background:0px center;border-top:0px;border-bottom:0px;border-left:0px;padding:0px 5px;margin:0px;height:inherit;border-right:1px solid rgb(222,222,222);text-align:right;min-width:1.2em;color:rgb(170,170,170);">
           11 
         </div> 
         <div style="font-family:inherit;background:0px center;border-top:0px;border-bottom:0px;border-left:0px;padding:0px 5px;margin:0px;height:inherit;border-right:1px solid rgb(222,222,222);text-align:right;min-width:1.2em;color:rgb(170,170,170);">
           12 
         </div> 
         <div style="font-family:inherit;background:0px center;border-top:0px;border-bottom:0px;border-left:0px;padding:0px 5px;margin:0px;height:inherit;border-right:1px solid rgb(222,222,222);text-align:right;min-width:1.2em;color:rgb(170,170,170);">
           13 
         </div> 
         <div style="font-family:inherit;background:0px center;border-top:0px;border-bottom:0px;border-left:0px;padding:0px 5px;margin:0px;height:inherit;border-right:1px solid rgb(222,222,222);text-align:right;min-width:1.2em;color:rgb(170,170,170);">
           14 
         </div> 
         <div style="font-family:inherit;background:0px center;border-top:0px;border-bottom:0px;border-left:0px;padding:0px 5px;margin:0px;height:inherit;border-right:1px solid rgb(222,222,222);text-align:right;min-width:1.2em;color:rgb(170,170,170);">
           15 
         </div> 
         <div style="font-family:inherit;background:0px center;border-top:0px;border-bottom:0px;border-left:0px;padding:0px 5px;margin:0px;height:inherit;border-right:1px solid rgb(222,222,222);text-align:right;min-width:1.2em;color:rgb(170,170,170);">
           16 
         </div> 
         <div style="font-family:inherit;background:0px center;border-top:0px;border-bottom:0px;border-left:0px;padding:0px 5px;margin:0px;height:inherit;border-right:1px solid rgb(222,222,222);text-align:right;min-width:1.2em;color:rgb(170,170,170);">
           17 
         </div> 
         <div style="font-family:inherit;background:0px center;border-top:0px;border-bottom:0px;border-left:0px;padding:0px 5px;margin:0px;height:inherit;border-right:1px solid rgb(222,222,222);text-align:right;min-width:1.2em;color:rgb(170,170,170);">
           18 
         </div> 
        </div></td> 
       <td style="border-width:0px;background:0px center;width:700px;padding:0px;font-family:'Droid Sans Mono', DroidSansMonoRegular, 'Courier New', monospace;vertical-align:top;margin:0px;"> 
        <div style="padding-right:0px;padding-left:0px;margin:0px;color:rgb(0,0,0);white-space:pre;background:none;border:none;padding-top:5px;padding-bottom:3px;font-size:12px;line-height:15px;"> 
         <div style="font-family:inherit;background:0px center;border:0px;padding:0px 5px;margin:0px;height:inherit;"> 
          <span style="font-family:inherit;height:inherit;font-weight:bold;">&lt;template&gt;</span> 
         </div> 
         <div style="font-family:inherit;background:0px center;border:0px;padding:0px 5px;margin:0px;height:inherit;"> 
          <span style="font-family:inherit;height:inherit;">&nbsp;&nbsp;&nbsp;&nbsp;</span> 
          <span style="font-family:inherit;height:inherit;font-weight:bold;">&lt;div&gt;</span> 
         </div> 
         <div style="font-family:inherit;background:0px center;border:0px;padding:0px 5px;margin:0px;height:inherit;"> 
          <span style="font-family:inherit;height:inherit;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
          <span style="font-family:inherit;height:inherit;font-weight:bold;">&lt;h2&gt;</span> 
          <span style="font-family:inherit;height:inherit;">{ { msg }}</span> 
          <span style="font-family:inherit;height:inherit;font-weight:bold;">&lt;/h2&gt;</span> 
         </div> 
         <div style="font-family:inherit;background:0px center;border:0px;padding:0px 5px;margin:0px;height:inherit;"> 
          <span style="font-family:inherit;height:inherit;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
          <span style="font-family:inherit;height:inherit;font-weight:bold;">&lt;p&gt;</span> 
          <span style="font-family:inherit;height:inherit;">新闻ID：{ { $route.params.newsId}}</span> 
          <span style="font-family:inherit;height:inherit;font-weight:bold;">&lt;/p&gt;</span> 
         </div> 
         <div style="font-family:inherit;background:0px center;border:0px;padding:0px 5px;margin:0px;height:inherit;"> 
          <span style="font-family:inherit;height:inherit;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
          <span style="font-family:inherit;height:inherit;font-weight:bold;">&lt;p&gt;</span> 
          <span style="font-family:inherit;height:inherit;">新闻标题：{ { $route.params.newsTitle}}</span> 
          <span style="font-family:inherit;height:inherit;font-weight:bold;">&lt;/p&gt;</span> 
         </div> 
         <div style="font-family:inherit;background:0px center;border:0px;padding:0px 5px;margin:0px;height:inherit;"> 
          <span style="font-family:inherit;height:inherit;">&nbsp;&nbsp;&nbsp;&nbsp;</span> 
          <span style="font-family:inherit;height:inherit;font-weight:bold;">&lt;/div&gt;</span> 
         </div> 
         <div style="font-family:inherit;background:0px center;border:0px;padding:0px 5px;margin:0px;height:inherit;"> 
          <span style="font-family:inherit;height:inherit;font-weight:bold;">&lt;/template&gt;</span> 
         </div> 
         <div style="font-family:inherit;background:0px center;border:0px;padding:0px 5px;margin:0px;height:inherit;">
           &nbsp; 
         </div> 
         <div style="font-family:inherit;background:0px center;border:0px;padding:0px 5px;margin:0px;height:inherit;"> 
          <span style="font-family:inherit;height:inherit;color:rgb(255,0,0);">&lt;script&gt;</span> 
         </div> 
         <div style="font-family:inherit;background:0px center;border:0px;padding:0px 5px;margin:0px;height:inherit;"> 
          <span style="font-family:inherit;height:inherit;color:#008080;">export</span> 
          <span style="font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
          <span style="font-family:inherit;height:inherit;font-weight:bold;">default</span> 
          <span style="font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
          <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">{ </span> 
         </div> 
         <div style="font-family:inherit;background:0px center;border:0px;padding:0px 5px;margin:0px;height:inherit;"> 
          <span style="font-family:inherit;height:inherit;color:rgb(0,111,224);">&nbsp;&nbsp;</span> 
          <span style="font-family:inherit;height:inherit;color:rgb(0,45,122);">name</span> 
          <span style="font-family:inherit;height:inherit;color:rgb(0,111,224);">:</span> 
          <span style="font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
          <span style="font-family:inherit;height:inherit;color:rgb(221,17,68);">'params'</span> 
          <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">,</span> 
         </div> 
         <div style="font-family:inherit;background:0px center;border:0px;padding:0px 5px;margin:0px;height:inherit;"> 
          <span style="font-family:inherit;height:inherit;color:rgb(0,111,224);">&nbsp;&nbsp;</span> 
          <span style="font-family:inherit;height:inherit;color:#008080;">data</span> 
          <span style="font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
          <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">(</span> 
          <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">)</span> 
          <span style="font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
          <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">{ </span> 
         </div> 
         <div style="font-family:inherit;background:0px center;border:0px;padding:0px 5px;margin:0px;height:inherit;"> 
          <span style="font-family:inherit;height:inherit;color:rgb(0,111,224);">&nbsp;&nbsp;&nbsp;&nbsp;</span> 
          <span style="font-family:inherit;height:inherit;font-weight:bold;">return</span> 
          <span style="font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
          <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">{ </span> 
         </div> 
         <div style="font-family:inherit;background:0px center;border:0px;padding:0px 5px;margin:0px;height:inherit;"> 
          <span style="font-family:inherit;height:inherit;color:rgb(0,111,224);">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
          <span style="font-family:inherit;height:inherit;color:rgb(0,45,122);">msg</span> 
          <span style="font-family:inherit;height:inherit;color:rgb(0,111,224);">:</span> 
          <span style="font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
          <span style="font-family:inherit;height:inherit;color:rgb(221,17,68);">'params page'</span> 
         </div> 
         <div style="font-family:inherit;background:0px center;border:0px;padding:0px 5px;margin:0px;height:inherit;"> 
          <span style="font-family:inherit;height:inherit;color:rgb(0,111,224);">&nbsp;&nbsp;&nbsp;&nbsp;</span> 
          <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">}</span> 
         </div> 
         <div style="font-family:inherit;background:0px center;border:0px;padding:0px 5px;margin:0px;height:inherit;"> 
          <span style="font-family:inherit;height:inherit;color:rgb(0,111,224);">&nbsp;&nbsp;</span> 
          <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">}</span> 
         </div> 
         <div style="font-family:inherit;background:0px center;border:0px;padding:0px 5px;margin:0px;height:inherit;"> 
          <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">}</span> 
         </div> 
         <div style="font-family:inherit;background:0px center;border:0px;padding:0px 5px;margin:0px;height:inherit;"> 
          <span style="font-family:inherit;height:inherit;color:rgb(255,0,0);">&lt;/script&gt;</span> 
         </div> 
        </div></td> 
      </tr> 
     </tbody> 
    </table>
3.  在App.vue文件里加入我们的<router-view>标签。这时候我们可以直接利用url传值了。  
    
    
    <table style="font-size:12px;margin-left:0px;border-spacing:0px;background:none;border:none;padding:0px;margin-right:0px;margin-bottom:0px;margin-top:0px;width:auto;table-layout:auto;"> 
     <tbody> 
      <tr style="background:0px center;padding:0px;border-style:none;vertical-align:top;margin:0px;"> 
       <td style="border-width:0px;background-position:0px center;padding:0px;font-family:'Droid Sans Mono', DroidSansMonoRegular, 'Courier New', monospace;vertical-align:top;margin:0px;background-color:rgb(238,238,238);"> 
        <div style="background:0px center;border:0px;padding-right:0px;padding-left:0px;margin:0px;white-space:nowrap;padding-top:5px;padding-bottom:3px;font-size:12px;line-height:15px;"> 
         <div style="font-family:inherit;background:0px center;border-top:0px;border-bottom:0px;border-left:0px;padding:0px 5px;margin:0px;height:inherit;border-right:1px solid rgb(222,222,222);text-align:right;min-width:1.2em;color:rgb(170,170,170);">
           1 
         </div> 
        </div></td> 
       <td style="border-width:0px;background:0px center;width:707px;padding:0px;font-family:'Droid Sans Mono', DroidSansMonoRegular, 'Courier New', monospace;vertical-align:top;margin:0px;"> 
        <div style="padding-right:0px;padding-left:0px;margin:0px;color:rgb(0,0,0);white-space:pre;background:none;border:none;padding-top:5px;padding-bottom:3px;font-size:12px;line-height:15px;"> 
         <div style="font-family:inherit;background:0px center;border:0px;padding:0px 5px;margin:0px;height:inherit;"> 
          <span style="font-family:inherit;height:inherit;font-weight:bold;">&lt;router-link </span> 
          <span style="font-family:inherit;height:inherit;color:#008080;">to</span> 
          <span style="font-family:inherit;height:inherit;color:rgb(0,111,224);">=</span> 
          <span style="font-family:inherit;height:inherit;color:rgb(221,17,68);">"/params/198/jspang website is very good"</span> 
          <span style="font-family:inherit;height:inherit;font-weight:bold;">&gt;</span> 
          <span style="font-family:inherit;height:inherit;">params</span> 
          <span style="font-family:inherit;height:inherit;font-weight:bold;">&lt;/router-link&gt;</span> 
          <span style="font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
          <span style="font-family:inherit;height:inherit;color:rgb(0,111,224);">|</span> 
         </div> 
        </div></td> 
      </tr> 
     </tbody> 
    </table>

###     ###

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

五、编程是导航

前进与后退

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

跳转

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

### eg: ###

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

<table style="background-color:rgb(248,248,255);font-size:12px;margin-left:0px;font-family:'Droid Sans Mono', DroidSansMonoRegular, 'Courier New', monospace;color:rgb(85,85,85);border-spacing:0px;border:none;padding:0px;margin-right:0px;margin-bottom:0px;margin-top:0px;width:auto;background-image:none;table-layout:auto;"> 
 <tbody> 
  <tr style="background:0px center;padding:0px;border-style:none;vertical-align:top;margin:0px;"> 
   <td style="border-width:0px;background-position:0px center;padding:0px;font-family:'Droid Sans Mono', DroidSansMonoRegular, 'Courier New', monospace;vertical-align:top;margin:0px;background-color:rgb(238,238,238);"> 
    <div style="background:0px center;border:0px;padding-right:0px;padding-left:0px;margin:0px;white-space:nowrap;padding-top:5px;padding-bottom:3px;font-size:12px;line-height:15px;"> 
     <div style="font-family:inherit;background:0px center;border-top:0px;border-bottom:0px;border-left:0px;padding:0px 5px;margin:0px;height:inherit;border-right:1px solid rgb(222,222,222);text-align:right;min-width:1.2em;color:rgb(170,170,170);">
       3 
     </div> 
     <div style="font-family:inherit;background:0px center;border-top:0px;border-bottom:0px;border-left:0px;padding:0px 5px;margin:0px;height:inherit;border-right:1px solid rgb(222,222,222);text-align:right;min-width:1.2em;color:rgb(170,170,170);">
       4 
     </div> 
     <div style="font-family:inherit;background:0px center;border-top:0px;border-bottom:0px;border-left:0px;padding:0px 5px;margin:0px;height:inherit;border-right:1px solid rgb(222,222,222);text-align:right;min-width:1.2em;color:rgb(170,170,170);">
       5 
     </div> 
     <div style="font-family:inherit;background:0px center;border-top:0px;border-bottom:0px;border-left:0px;padding:0px 5px;margin:0px;height:inherit;border-right:1px solid rgb(222,222,222);text-align:right;min-width:1.2em;color:rgb(170,170,170);">
       6 
     </div> 
     <div style="font-family:inherit;padding:0px 5px;margin:0px;height:inherit;background:rgb(179,211,244);border-width:1px;border-right-style:solid;border-color:rgb(89,153,217) rgb(222,222,222) rgb(89,153,217) rgb(89,153,217);text-align:right;color:rgb(170,170,170);min-width:1.2em;">
       7 
     </div> 
     <div style="font-family:inherit;padding:0px 5px;margin:0px;height:inherit;background:rgb(179,211,244);border-width:1px;border-right-style:solid;border-color:rgb(89,153,217) rgb(222,222,222) rgb(89,153,217) rgb(89,153,217);text-align:right;color:rgb(170,170,170);min-width:1.2em;">
       8 
     </div> 
     <div style="font-family:inherit;padding:0px 5px;margin:0px;height:inherit;background:rgb(179,211,244);border-width:1px;border-right-style:solid;border-color:rgb(89,153,217) rgb(222,222,222) rgb(89,153,217) rgb(89,153,217);text-align:right;color:rgb(170,170,170);min-width:1.2em;">
       9 
     </div> 
     <div style="font-family:inherit;background:0px center;border-top:0px;border-bottom:0px;border-left:0px;padding:0px 5px;margin:0px;height:inherit;border-right:1px solid rgb(222,222,222);text-align:right;min-width:1.2em;color:rgb(170,170,170);">
       10 
     </div> 
     <div style="font-family:inherit;background:0px center;border-top:0px;border-bottom:0px;border-left:0px;padding:0px 5px;margin:0px;height:inherit;border-right:1px solid rgb(222,222,222);text-align:right;min-width:1.2em;color:rgb(170,170,170);">
       11 
     </div> 
    </div></td> 
   <td style="border-width:0px;background:0px center;width:750px;padding:0px;font-family:'Droid Sans Mono', DroidSansMonoRegular, 'Courier New', monospace;vertical-align:top;margin:0px;"> 
    <div style="padding-right:0px;padding-left:0px;margin:0px;color:rgb(0,0,0);white-space:pre;background:none;border:none;padding-top:5px;padding-bottom:3px;font-size:12px;line-height:15px;"> 
     <div style="font-family:inherit;background:0px center;border:0px;padding:0px 5px;margin:0px;height:inherit;"> 
      <span style="font-family:inherit;height:inherit;color:#008080;">export</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="font-family:inherit;height:inherit;font-weight:bold;">default</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">{ </span> 
     </div> 
     <div style="font-family:inherit;background:0px center;border:0px;padding:0px 5px;margin:0px;height:inherit;"> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,111,224);">&nbsp;&nbsp;</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,45,122);">name</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,111,224);">:</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="font-family:inherit;height:inherit;color:rgb(221,17,68);">'app'</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">,</span> 
     </div> 
     <div style="font-family:inherit;background:0px center;border:0px;padding:0px 5px;margin:0px;height:inherit;"> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,111,224);">&nbsp;&nbsp;</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,45,122);">methods</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,111,224);">:</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">{ </span> 
     </div> 
     <div style="font-family:inherit;background:0px center;border:0px;padding:0px 5px;margin:0px;height:inherit;"> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,111,224);">&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span style="font-family:inherit;height:inherit;color:#008080;">goback</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">(</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">)</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">{ </span> 
     </div> 
     <div style="font-family:inherit;background:0px center;border:0px;padding:0px 5px;margin:0px;height:inherit;"> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,111,224);">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span style="font-family:inherit;height:inherit;font-weight:bold;">this</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">.</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">$</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,45,122);">router</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">.</span> 
      <span style="font-family:inherit;height:inherit;color:#008080;">go</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">(</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,111,224);">-</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,153,153);">1</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">)</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">;</span> 
     </div> 
     <div style="font-family:inherit;background:0px center;border:0px;padding:0px 5px;margin:0px;height:inherit;"> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,111,224);">&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">}</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">,</span> 
     </div> 
     <div style="font-family:inherit;border:0px;padding:0px 5px;margin:0px;height:inherit;background:rgb(255,254,226);"> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,111,224);">&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span style="font-family:inherit;height:inherit;color:#008080;">goHome</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">(</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">)</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">{ </span> 
     </div> 
     <div style="font-family:inherit;border:0px;padding:0px 5px;margin:0px;height:inherit;background:rgb(255,254,226);"> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,111,224);">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span style="font-family:inherit;height:inherit;font-weight:bold;">this</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">.</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">$</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,45,122);">router</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">.</span> 
      <span style="font-family:inherit;height:inherit;color:#008080;">push</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">(</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(221,17,68);">'/'</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">)</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">;</span> 
     </div> 
     <div style="font-family:inherit;border:0px;padding:0px 5px;margin:0px;height:inherit;background:rgb(255,254,226);"> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,111,224);">&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">}</span> 
     </div> 
     <div style="font-family:inherit;background:0px center;border:0px;padding:0px 5px;margin:0px;height:inherit;"> 
      <span style="font-family:inherit;height:inherit;color:rgb(0,111,224);">&nbsp;&nbsp;</span> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">}</span> 
     </div> 
     <div style="font-family:inherit;background:0px center;border:0px;padding:0px 5px;margin:0px;height:inherit;"> 
      <span style="font-family:inherit;height:inherit;color:rgb(51,51,51);">}</span> 
     </div> 
    </div></td> 
  </tr> 
 </tbody> 
</table>