vue-router 動態路由傳參 & 打開新窗口頁面

一. 路由傳參

   使用params方法傳參的時候，要在路由後面加參數名，並且傳參的時候，參數名要跟路由後面設置的參數名對應。

   使用query方法，就沒有這種限制，直接在跳轉裏面用就可以。

   對比1:  query方法，可以與path和name共用，params只能對應name。

                query & params，前者在瀏覽器地址欄中顯示參數，後者則不顯示。

獲取參數值：query：this.$route.query.id；params： this.$route.params.id

如果你要使用params傳參，那麼你的路由頁面index.js必須帶上參數，如下：
{
   path: '/detail/:id',
   name: "detail",
   component: detail
}
使用： 
方法1：<router-link :to="{ name: 'detail', params: { id: 123 }}">點擊按鈕</router-link>
方法2：this.$router.push({name:'detail',params: { id:123 } })
頁面url顯示結果是：http://localhost:8081/#/detail/123


如果你要使用query傳參，那麼你的路由頁面index.js必須帶上參數，如下：
{
   path: '/detail',//這裏不需要參入參數，參見上面的params寫法
   name: "detail",
   component: detail
}
使用： 
方法1：<router-link :to="{ name: 'detail', query: { id: 123 }}">點擊按鈕</router-link>
方法2：this.$router.push({name:'detail',query:{id:123}})

方法3：<router-link :to="{ path: 'detail', query: { id: 123 }}">點擊按鈕</router-link>
方法4：this.$router.push({path:'detail',query:{id:123}})
頁面url顯示結果是：http://localhost:8081/#/detail?id=123

二. 打開新窗口頁面

1. <router-link>標籤實現新窗口打開：

官方文檔中說 v-link 指令被 <router-link> 組件指令替代，且 <router-link>不支持 target="_blank" 屬性，如果需要打開一個新窗口必須要用<a>標籤，但事實上vue2版本的 <router-link> 是支持  target="_blank" 屬性的(tag="a")，如下：

<router-link target="_blank" :to="{path:'/home',query:{ id:'1' }}">新頁面打開home頁</router-link>

2. 編程式導航：

有些時候需要在單擊事件或者在函數中實現頁面跳轉，那麼可以藉助router的示例方法，通過編寫代碼實現。我們常用的是 $router.push 和 $router.go 但是vue2.0以後，這種方式就不支持新窗口打開的屬性了，這個時候就需要使用this.$router.resolve,如下：

let routeUrl = this.$router.resolve({
     path: "/share",
     query: {
       id:96
     }
});
window.open(routeUrl.href, '_blank');