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

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

// 直接寫上跳轉(zhuǎn)的地址

link跳轉(zhuǎn)

// 添加參數(shù)

// 參數(shù)獲取

id = this.$route.query.id

// 新窗口打開

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

}

// 注意地址需寫在 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沒有

toDeail (e) {

this.$router.replace({name: '/detail', params: {id: e}})

}

4. resolve跳轉(zhuǎn)

//resolve頁(yè)面跳轉(zhuǎn)可用新頁(yè)面打開

//2.1.0版本后，使用路由對(duì)象的resolve方法解析路由，可以得到location、router、href等目標(biāo)路由的信息。得到href就可以使用window.open開新窗口了(這邊應(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

testDemo{{this.$route.query.setid}}

接收的參數(shù):

userlist--{{mallCode}}

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ù)放在當(dāng)前組件的數(shù)據(jù)內(nèi)

//this.mallInfo.searchMap.mallCode = routerParams;

//this.keyupMallName()

}

}

}

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

總結(jié)

以上是生活随笔為你收集整理的vue中页面跳转传值_vue跳转方式（打开新页面）及传参操作示例的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。