vue之路由跳轉的3種方式

1.路由標簽跳轉

<router-link :to="{path, params, query}"></router-link>

<router-link :to="{name, params, query}"></router-link>

<router-link :to="/index/page1"></router-link>

　　path------------跳轉路徑( 例：path: '/index/page1' )

　　name------------跳轉路由名稱( 例：name: 'router name' )

2.函數操作（params方式傳參）

// 對象寫法
this.$router.push({
   name: 'router name',
   params: {
　　　　key: value
       ...
    }  
})
// 字符串寫法
this.$router.push('/index/page1/params1/param2')

　　相應的跳轉頁接收參數格式如下：this.$route.params
3.函數操作（query方式傳參）

// 對象寫法
this.$router.push({
   name: 'router name',
   query: {
　　　　key: value
       ...
    }  
})
// 字符串寫法
this.$router.push('/index/page1?param1=param1&param2=param2')

　　相應的跳轉頁接收參數格式如下：this.$route.query

注：2和3的區別在於，3的參數會以字符串拼接的形式（key=value）展示在地址欄。

　　2中，首先，顯示上（/param1/param2...），其次，如果路由配置中沒有指定參數名稱，在當前頁面刷新后通過this.$route.params獲取不到對應的參數。

 

{ // 刷新頁面后仍能取到參數值
  path：‘/index/:param1/:param2’,
  name: 'router name',
  component: 'component name',
  ...        
}

{ // 刷新頁面后不能正常獲取值
  path：‘/index’,
  name: 'router name',
  component: 'component name',
  ...        
}