vue.js中打開新頁面的方法

這篇文章主要介紹vue.js中打開新頁面的方法，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

vue.js中打開新頁面的方法：1、【router-link】跳轉，代碼為【<router-link to="/detail/one">】；2、通過【this.$router.push】跳轉。

vue.js中打開新頁面的方法：

1.router-link跳轉

   // 直接寫上跳轉的地址
  <router-link to="/detail/one">
    <span class="spanfour" >link跳轉</span>
  </router-link>
  // 添加參數
  <router-link :to="{path:'/detail/two', query:{id:1，name:'vue'}}">
   </router-link>
  // 參數獲取
  id = this.$route.query.id
  // 新窗口打開
  <router-link :to="{path:'/detail/three', query:{id:1，name:'vue'}}" target="_blank">
  </router-link>
```javascript

2.this.$router.push跳轉

```javascript
toDeail (e) {
   this.$router.push({path: "/detail", query: {id: e}})
 }
 // 參數獲取
 id = this.$route.query.id
 
 toDeail (e) {
   this.$router.push({name: "/detail", params: {id: e}})
 }
 // 注意地址需寫在 name后面
 //參數獲取，params和query區別，query參數在地址欄顯示，params的參數不在地址欄顯示
 id = this.$route.params.id

3.this.$router.replace跳轉

//和push的區別，push有記錄一個history，replace沒有
 toDeail (e) {
   this.$router.replace({name: '/detail', params: {id: e}})
 }

4. resolve跳轉

  resolve頁面跳轉可用新頁面打開
 2.1.0版本后，使用路由對象的resolve方法解析路由，可以得到location、router、href等目標路由的信息。得到href就可以使用window.open開新窗口了（這邊應用：https://segmentfault.com/q/1010000009557100下的一個回答）
 toDeail (e) {
   const new = this.$router.resolve({name: '/detail', params: {id: e}})
   window.open(new.href,'_blank')
 }

以上是“vue.js中打開新頁面的方法”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！