Vue电商平台未登录的导航路由守卫

电商平台

未登录的状态下不能进入交易、订单、个人中心页面，要先进入登录页面再跳转到相对应的页面

<router-link to='/home'>首页</router-link>
<router-link to='/login'>登录页面</router-link>
<router-link to='/trade'>结算订单页面</router-link>
<router-link to='/pay'>支付订单页面</router-link>
<router-link to='/paysuccess'>支付成功页面</router-link>
<router-link to='/center'>个人中心页面</router-link>

Router页面

//未登录点击结算订单页面、支付订单页面、支付成功页面、个人中心页面跳转到登录页面

 // 把未登录时想去而没有去成的信息，存储于地址栏【路由】中

//全局守卫：前置守卫(在路由跳转之间进行判断)
// to可以获取到你要跳转到哪个路由的信息
// from：可以获取到从哪个路由来的信息
// next：放行函数   next()放行  next(path)放行到指定路径

router.beforeEach(async (to, from, next) => {
    let toPath = to.path
    if (toPath.indexOf('/trade')!=-1 || 
        toPath.indexOf('/pay')!&#