0 场景
有多个vue编写的连续h5页面，要求用户按序访问，不能跳步访问，不能直接通过路由修改进入某一页面，不能输入不存在的页面来访问
1 实现思路
1.1 访问首页，ok
1.2 直接跳转到非首页，重定向到首页并携带参数
1.3 正常页面跳转，通过sessionStorage存储路由历史，进行比对，验证是否按序前进或后退
2 代码实现
main.js引入
// main.js
import './permission'
核心代码permission.js
// permission.js
import router from './router'; // 引入路由文件
// 路由拦截处理
router.beforeEach((to, from, next)=>{
let routerList = JSOON.parse(sessionStorage.getItem('routerList'));
// 1 访问首页，则放过
if(to.path === '/home'){
return next();
}
// 2 禁止直接跳转到非首页，并携带请求参数
if(from.path === '/' && !sessionStorage.getItem('currentRoute')){
return router.push({
path:'/Home',query:{
...to.query}}).catch(err=>{
})
}
// 3 正常页面跳转
else{
// 3.1 按步骤前进，就近修改标志位，添加路由列表记录
if(sessionStorage.getItem('currentRoute') == to.meta.currentRoute){
routerList.indexOf(to,meta.currentRoute) == -1 && routerList.push(to.meta.currentRoute)
sessionStorage.setItem('routerList',JSON.stringify([...routerList]))
if(to.query.id){
return next()
}
if(from.query.id){
return router.push({
path:to.path,query:{
id:from.query.id,...to.query}}).catch(err=>{
})
}else{
return next()
}
}
// 3.2 按步骤回退
if(to.meta.currentRoute == routerList.slice(-2,-1)){
sessionStorage.setItem('currentRoute', to.meta.currentRoute)
routerList.pop()
sessionStorage.setItem('routerList', JSON.stringify([...routerList]))
return next()
}
next({
path:'',replace:true})
}
})
router文件anyoneRouter.js中
// anyoneRouter.js
export default [
{
...
},
{
path: '...',
name: '...',
component: ...,
meta: {
title: '...',
currentRoute: 'CurrentRoute',
goRoute1: 'GoRouteOne',
goRoute2: 'GoRouteTwo'
}
},
{
...
}
]
页面SomePage.vue中
// SomePage.vue
...
let path = this.path ? '/SomeRoute' : '/ElseRoute'
let goRoute = this.goRoute ? 'goRoute1' : 'goRoute2'
sessionStorage.setItem('currentRoute', thie.$route.meta[goRoute])
this.$router.push(path)
...