快捷導(dǎo)航

vue跳轉(zhuǎn)方式（打開(kāi)新頁(yè)面）及傳參操作示例

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

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

本文實(shí)例講述了vue跳轉(zhuǎn)方式（打開(kāi)新頁(yè)面）及傳參操作。分享給大家供大家參考，具體如下：

1. router-link跳轉(zhuǎn)

// 直接寫(xiě)上跳轉(zhuǎn)的地址
<router-link to="/detail/one">
  <span class="spanfour" >link跳轉(zhuǎn)</span>
</router-link>
// 添加參數(shù)
<router-link :to="{path:'/detail/two', query:{id:1，name:'vue'}}">
</router-link>
// 參數(shù)獲取
id = this.$route.query.id
// 新窗口打開(kāi)
<router-link :to="{path:'/detail/three', query:{id:1，name:'vue'}}" target="_blank">
</router-link>

2. this.$router.push跳轉(zhuǎn)

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}})
}
// 注意地址需寫(xiě)在 name后面
//參數(shù)獲取，params和query區(qū)別，query參數(shù)在地址欄顯示，params的參數(shù)不在地址欄顯示
id = this.$route.params.id

3. this.$router.replace跳轉(zhuǎn)

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

4. resolve跳轉(zhuǎn)

//resolve頁(yè)面跳轉(zhuǎn)可用新頁(yè)面打開(kāi)
//2.1.0版本后，使用路由對(duì)象的resolve方法解析路由，可以得到location、router、href等目標(biāo)路由的信息。得到href就可以使用window.open開(kāi)新窗口了（這邊應(yīng)用：https://segmentfault.com/q/1010000009557100下的一個(gè)回答）
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，以下舉一個(gè)接收的例子

注意接收參數(shù)時(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() {
    // 取到路由帶過(guò)來(lái)的參數(shù)
    const routerParams = this.$route.query.mallCode;
    this.mallCode = routerParams;
    console.log(this.$route.query);
    // 將數(shù)據(jù)放在當(dāng)前組件的數(shù)據(jù)內(nèi)
    //this.mallInfo.searchMap.mallCode = routerParams;
    //this.keyupMallName()
   }
  }
 }
</script>
<style scoped>
</style>

希望本文所述對(duì)大家vue.js程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: