Vue路由跳轉(zhuǎn)傳參或打開新頁面跳轉(zhuǎn)

1. 通過路由中的name屬性 

使用params傳遞參數(shù), 使用this.$route.params獲取參數(shù)

這種方式傳遞相當(dāng)于post請(qǐng)求, 傳遞的數(shù)據(jù)不會(huì)顯示在url地址欄,但是頁面刷新,參數(shù)會(huì)丟失

// 傳遞參數(shù)
this.$router.push({
	name: "首頁",
	params: {
		code: 1
	}
})
// 獲取參數(shù)
this.$route.params

2. 通過路由屬性中的path屬性 

使用query傳遞參數(shù), 使用this.$route.query獲取參數(shù)

這種方式相當(dāng)于get請(qǐng)求, 傳遞的參數(shù)會(huì)顯示在url地址欄, 頁面刷新,參數(shù)還保留在url上面

// 傳遞參數(shù)
this.$router.push({
	path: "/dashboard",
	query: {
		code: 1
	}
})
// 獲取參數(shù)
this.$route.query

在獲取傳遞參數(shù)的時(shí)候都是使用this.$route

3. $router 和 $route的區(qū)別

$router 可以看到$router是全局路由VueRouter實(shí)例

$route是存放路由信息的一個(gè)對(duì)象, 傳遞的數(shù)據(jù)都是存放在$route中

4. 在Vue項(xiàng)目中點(diǎn)擊跳轉(zhuǎn)打開一個(gè)新的頁面

使用this.$router.resolve({path: "/login"})可以獲取到指定的路由的信息

使用window.open(routeData.href, '_blank')在新窗口中打開指定的路由頁面

query:{code: 1}傳遞參數(shù), 但是可以在url地址欄中看到傳遞的參數(shù)

通過this.$route.query獲取參數(shù)

let routeData = this.$router.resolve({ path: '/login',query: {loginName}});
window.open(routeData.href, '_blank');

vue的跳轉(zhuǎn)（打開新頁面）

router-link跳轉(zhuǎn)

? ?// 直接寫上跳轉(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
? // 新窗口打開
? <router-link :to="{path:'/detail/three', query:{id:1，name:'vue'}}" target="_blank">
? </router-link>

this.$router.push/replace跳轉(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

resolve跳轉(zhuǎn)

?? ?//resolve頁面跳轉(zhuǎn)可用新頁面打開
? ? //2.1.0版本后，使用路由對(duì)象的resolve方法解析路由，可以得到location、router、href等目標(biāo)路由的信息。得到href就可以使用window.open開新窗口了
?toDeail (e) {
? ?const new = this.$router.resolve({name: '/detail', params: {id: e}})
? ?window.open(new.href,'_blank')
?}

window.open()

1. 在當(dāng)前窗口打開百度,并且使URL地址出現(xiàn)在搜索欄中.

window.open("http://www.baidu.com/", "_search");
window.open("http://www.baidu.com/", "_self");

2. 在一個(gè)新的窗口打開百度

window.open("http://www.baidu.com/", "_blank");

3. 打開一個(gè)新的窗口,并命名為"hello"

window.open("", "hello");

另外, open函數(shù)的第二個(gè)參數(shù)還有幾種選擇：

• _top : 如果頁面上有framesets,則url會(huì)取代framesets的最頂層, 即, 如果沒有framesets, 則效果等同于_self.
• _parent：url所指向的頁面加載到當(dāng)前frame的父親, 如果沒有則效果等同于_self.
• _media : url所指向的頁面加載到Media Bar所包含的HTML代碼區(qū)域中.如果沒有Media Bar則加到本身.

如果還要添加其它的東西在新的窗口上, 則需要第三個(gè)參數(shù)：

• channelmode : yes|no|1|0  (窗口顯示為劇場(chǎng)模式[全屏幕顯示當(dāng)前網(wǎng)頁, 包括工具欄等],或頻道模式[一般顯示]).
• directories :  yes|no|1|0 (是否添加目錄按鈕, 比如在IE下可能會(huì)有一個(gè)"鏈接"這樣的按鈕在最上面出現(xiàn))
• fullscreen : yes|no|1|0 (使瀏覽器處理全屏幕模式, 并隱藏標(biāo)題欄和菜單等)
• menubar : yes|no|1|0 (是否顯示瀏覽器默認(rèn)的菜單欄)
• resizeable : yes|no|1|0 (窗口是否可調(diào)整大小)
• scrollbars : yes|no|1|0 (是否允許水平或垂直滑動(dòng)條)
• titlebar : yes|no|1|0 (是否添加一個(gè)標(biāo)題欄)
• toolbar : yes|no|1|0 (是否添加瀏覽器默認(rèn)的工具欄)
• status : yes|no|1|0 (是否顯示狀態(tài)欄)
• location : yes|no|1|0  (是否顯示搜索欄)
• copyhistory :  yes|no|1|0 (似乎已經(jīng)廢棄, 如果只要工具欄顯示, 歷史按鈕就會(huì)顯示出來)
• height : 窗口的高度, 最小值為100像素
• width :  窗口的寬度, 最小值為w100像素
• left : 窗口的最左邊相對(duì)于屏幕的距離

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論