使用next方法设置跳转页面并传参(项目多入口传参根据标识进行判断跳转不同页面的实现)
多入口判断vue项目是多入口的情况下,在main.js文件下根据标识进行跳转页面的判断并传参,跳转以next方式实现:代码如下:在router.beforeEach内添加如下代码:(以startpage值为判断条件,当值为lianYou或huaGong时跳转的是同一个页面,需要传参进行判断,当值为unqualified时跳到另一个页面–unqualified页面,不需要传参)router...
多入口判断
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
更多推荐
所有评论(0)