使用next方法設置跳轉頁面並傳參(項目多入口傳參根據標識進行判斷跳轉不同頁面的實現)

多入口判斷

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.type,this.route.query.type,傳字符串時則用this.route.query

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章