多入口判断

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'://列表3
                next({
                    name: `unqualifiedList`,
                    redirect: `/unqualifiedList`
                })
               	break;
          	default:
				break;
        }
	}
	...
})

注:不传参的情况下,跳转可以直接用以下方式实现:

next({
   name: `unqualifiedList`,
   redirect: `/unqualifiedList`
})

传参

不使用next方法的话简单来说可以直接用以下方式实现:

this.$router.push({
   name: 'oilRefiningList',
   params: {type:'lianYou'}
})

this.$router.push({
   name: 'oilRefiningList',
   query: {type:'lianYou'}
})

下面详细说这两种传参的区别及使用next:
如果需要传参的话实现方式有两种,如上面的代码判断跳到列表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

Logo

前往低代码交流专区

更多推荐