本文例項講述了vue跳轉方式（開啟新頁面）及傳參操作。分享給大家供大家參考，具體如下：

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>

2. this.$router.push跳轉

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')
}

接收方怎麼接收引數 this.$route.query.serid和this.$route.params.setid，以下舉一個接收的例子

注意接收引數時是 $route 不是 $router

<template>
  <div>
    testDemo{{this.$route.query.setid}}
  </div>
</template>

接收的引數:

<template>
  <div>userlist--{{mallCode}} </div>
</template>
<script>
 export default {
  name: "UserList",date:function(){
   return {"mallCode":mallCode}
  },created(){
   this.getParams()
  },methods:{
   getParams() {
    // 取到路由帶過來的引數
    const routerParams = this.$route.query.mallCode;
    this.mallCode = routerParams;
    console.log(this.$route.query);
    // 將資料放在當前元件的資料內
    //this.mallInfo.searchMap.mallCode = routerParams;
    //this.keyupMallName()
   }
  }
 }
</script>
<style scoped>
</style>

希望本文所述對大家vue.js程式設計有所幫助。