vue跳轉方式（打開新頁面）及傳參操作示例

更新時間：2020年01月26日 10:29:10 作者：與f

這篇文章主要介紹了vue跳轉方式（打開新頁面）及傳參操作,結合實例形式分析了vue.js跳轉實現(xiàn)方式與參數(shù)接受相關操作技巧,需要的朋友可以參考下

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

1. router-link跳轉

// 直接寫上跳轉的地址
<router-link to="/detail/one">
  <span class="spanfour" >link跳轉</span>
</router-link>
// 添加參數(shù)
<router-link :to="{path:'/detail/two', query:{id:1，name:'vue'}}">
</router-link>
// 參數(shù)獲取
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}})
}
// 參數(shù)獲取
id = this.$route.query.id
toDeail (e) {
  this.$router.push({name: "/detail", params: {id: e}})
}
// 注意地址需寫在 name后面
//參數(shù)獲取，params和query區(qū)別，query參數(shù)在地址欄顯示，params的參數(shù)不在地址欄顯示
id = this.$route.params.id

3. this.$router.replace跳轉

//和push的區(qū)別，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')
}

接收方怎么接收參數(shù) this.$route.query.serid和this.$route.params.setid，以下舉一個接收的例子

注意接收參數(shù)時是 $route 不是 $router

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

接收的參數(shù):

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

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

您可能感興趣的文章: