Vue2|Router普通页面

router文件夹下创建index.js和routes.js文件

ruotes.js文件内

//后台的话一般是login页，404页,403页(没权限)，home页，然后都是home的子路由
export default [
//重定向到首页
{
    path: '/',
    redirect: '/home'
}
,
{
    //传params时需要占位/:skuId?
    path: '/detail/:skuId?',
    //命名
    name:Detail,
    //引入组件
    component: () => import('@/pages/Communication/Communication'),
    //路由元信息,控制当前路由是否需要Footer组件
    meta: { show: true },
    //子路由
    children: [
      {
        path: 'event',
        component: () => import('@/pages/Communication/EventTest/EventTest'),
        meta: {
         show: false
        },
      }
    ]
  },
]

index.js文件内

//配置路由
//第一步：引入插件、安装插件
import VueRouter from "vue-router";
import Vue from "vue";
Vue.use(VueRouter);
//引入路由相关的配置项,上面那个文件
import routes from './routes'
//引入仓库，获取token用
import store from '@/store'

//重写push，replace
//把人家原型对象的push方法进行保存
let originPush = VueRouter.prototype.push;
let originReplace = VueRouter.prototype.replace;
//VueRouter.prototype原型对象添加一个方法
//location:路由跳转相关的信息
VueRouter.prototype.push = function (location, resolve, reject) {
//当前函数this：即为VueRouter类的实例
//相当于push方法里面this，是windows【完犊子了】
//利用人家push方法实现路由跳转，保证push里面this,应该vueRouter类的实例
if (resolve && reject) {
    //代表真:代表着两个形参接受参数【箭头函数】
    originPush.call(this, location, resolve, reject);
} else {
    originPush.call(this, location, () => { }, () => { });
}
}
VueRouter.prototype.replace = function (location, resolve, reject) {
    if (resolve && reject) {
        //代表真:代表着两个形参接受参数【箭头函数】
        originReplace.call(this, location, resolve, reject);
    } else {
        originReplace.call(this, location, () => { }, () => { });
    }
}

//第二步:暴露VueRouter类的实例
//对外暴露一个路由器,实质是VueRouter类的实例,一个路由器可以管理多个路由
const router = new VueRouter({
    //配置路由
    routes,
    //设置滚动条的位置
    scrollBehavior() {
        //滚动行为这个函数,需要有返回值,返回值为一个对象。
        //经常可以设置滚动条x|y位置 [x|y数值的设置一般最小是零]
        return { y: 0 };
    }
});

export default router;


//全局守卫:只要项目中有任何路由变化，全局守卫都会进行拦截【符合条件走你，不符合条件不能访问】

//全局守卫:全局前置守卫【访问之前进行触发】

//全局前置守卫
router.beforeEach(async (to, from, next) => {
//to:去的那个路由的信息
//from:从那个路由而来的信息
//next:放行函数!!!!!! 
//第一种：next(),放行函数，放行到它想去的路由！！！
//第二种:next(path),守卫指定放行到那个路由去?

//用户是否登录:取决于仓库里面是否有token！！！
//每一次路由跳转之前需要用有用户信息在跳转,没有发请求获取用户信息在跳转！！！！
//token
let hasToken = store.state.user.token;
//用户信息
let hasNickName = store.state.user.nickName;
//用户登录
if (hasToken) {
    //用户登录了,不能去login
    if (to.path == "/login") {
        next('/home');
    } else {
        //用户登陆了,而且还有用户信息【去的并非是login】
        if (hasNickName) {
            next();
        } else {
            //用户登陆了,但是没有用户信息 
            try {
                //发请求获取用户信息以后在放行
                await store.dispatch('getUserInfo');
                next();
            } catch (error) {
                //用户没有信息，还携带token发请求获取用户信息【失败】
                //token【学生证失效了】
                //token失效:本地清空数据、服务器的token通知服务器清除
                await store.dispatch('logout');
                //回到登录页，重新获取一个新的学生证
                next('/login');
            }
        }
    }
} else {
    //用户未登录||目前的判断都是放行.将来这里会'回手掏'增加一些判断
    //用户未登录:不能进入/trade、/pay、/paysuccess、/center、/center/myorder  /center/teamorder
    let toPath = to.path;
    if (toPath.indexOf('trade') != -1 || toPath.indexOf('pay') != -1 || toPath.indexOf('center') != -1) {
        next('/login?redirect='+toPath);
    } else {
        next();
    }
}
});