多入口判斷
vue項目是多入口的情況下,在main.js文件下根據標識進行跳轉頁面的判斷並傳參,跳轉以next方式實現:
代碼如下:
在router.beforeEach內添加如下代碼:
(以startpage值爲判斷條件,當值爲lianYou或huaGong時跳轉的是同一個頁面,需要傳參進行判斷,當值爲unqualified時跳到另一個頁面–unqualified頁面,不需要傳參)
router.beforeEach(function(to, from, next) {
if(to.path === from.path && to.path === '/'){
var startpage = Tool.getUrlQuery("startpage");//截取url帶的判斷標識
var router = '';
switch(startpage) {
case 'lianYou'://列表1
next({
name: 'oilRefiningList',
params: {type:'lianYou'},
// query: { toPath: 'lianYou' },
redirect: '/oilRefiningList'
})
break;
case 'huaGong'://列表2
next({
name: 'oilRefiningList',
params:{type:'huaGong'},
redirect: '/oilRefiningList'
})
break;
case 'unqualified'://不合格審批列表
next({
name: `unqualifiedList`,
redirect: `/unqualifiedList`
})
break;
default:
break;
}
}
...
})
注:不傳參的情況下,跳轉可以直接用以下方式實現:
next({
name: `unqualifiedList`,
redirect: `/unqualifiedList`
})
傳參
如果需要傳參的話實現方式有兩種,如上面的代碼判斷跳到列表1和列表2,實際上是跳到同一列表頁,需要通過參數進行判斷:
方式一:
params方式實現傳參(params不能傳字符串,只能傳對象。只可用name進行傳參,使用path則會自動忽略掉params)
next({
name: 'oilRefiningList',
params: {type:'lianYou'},
redirect: '/oilRefiningList'
})
獲取值:this.$route.params.type
方式二:
query方式實現傳參(query可以傳字符串或者是對象。可用path或者name進行傳參,用path時傳對象,傳字符串時接收到的query則是由單個字符組成的對象如下圖:
,用name時可傳對象或者字符串)
next({
name: 'oilRefiningList',
query: {type:'lianYou'},
redirect: '/oilRefiningList'
})
或者
next({
path: '/oilRefiningList',
query: {type:'lianYou'},
redirect: '/oilRefiningList'
})
獲取值:this.route.query