Centos安裝nginx步驟(支援HTTPS)
阿新 • • 發佈:2020-12-09
技術標籤:vur-routervue.js
Vue router路由監聽、路由傳參
Vue 主要用於單頁面應用,各種複雜頁面的跳轉就需要通過第三方路由來實現,本文采用官方路由 vue-router進行跳轉,在這跳轉過程中,可以監聽路由變化,來執行一些方法或者根據路由傳遞的引數進行不同的響應。
具體程式碼如下:
watch: {
//監測路由變化
'$route'(to,from){
//直接輸入相應得路由,保證導航欄正確啟用
//this.routerJump();//這是路由跳轉執行的方法
//判斷由詳情頁面跳轉到哪個路由下,相應修改啟用樣式
switch (this.$route.query.content) {
case "homePage":
//this.addCSS(0);
this.$router.replace("/homePage")
break;
case "dataCenter":
//this.addCSS(1);
this.$router.replace( "/dataCenter")
break;
default:
break;
}
}
}
程式碼解釋:
這個方法一定要寫在watch裡面
例:當我從"/ranking"路由跳轉到"/dataCenter"路由下
引數 to:代表的是變化後的路由物件,在這個例子中就是"/dataCenter":
引數from:代表從哪個路由出來的,這個例子中屬於"/ranking":
在this.routerJump()這個方法中,我通過判斷當前路由的name屬性,來進行展示頁面的不同效果;
//路由跳轉方法
routerJump(){
switch (this.$route.name) {
//當處於競賽詳情頁面取消導航啟用樣式
case "admin":
//this.addCSS(-1);
break;
//首頁啟用
case "homePage":
//this.addCSS(0);
break;
//資料中心頁啟用
case "dataCenter":
//this.addCSS(1);
break;
//排行榜頁啟用
case "ranking":
//this.addCSS(2);
break;
default:
break;
};
}
路由傳參,我則是採用query方式,
通過this.$route.query.content獲取傳遞的引數,進行判斷。
本文采用query方式進行引數傳遞,不需要在路由上配置多餘東西,會在url欄顯示出傳遞的引數和值,再次重新整理就引數消失,為了避免URL欄出現不純粹資訊,我採用this.$router.replace("/homePage"),替換跳轉後的url地址。
結語
希望本次的分享,能夠幫助大家對vue 路由跳轉和傳參有一定的幫助