Vue关于路由拦截

阅读完需：约 2 分钟

一、data数据定义userInfo成一个对象，包含账号与密码两个属性：

data() {
    return {
      userInfo: {
        loginName: "",
        password: ""
      }
    };
  },

二、账号密码，采用对象里的属性绑定。此处我用的是element-ui，外层特定的标签名称不要纠结：

其中点击登录的onSubmit的方法中，若成功登录，则在localStorage中存储：

三、在路由跳转时，判断一下当前的localStorage中有没有存储信息

【路由按你需求写，这里我写了嵌套路由与普通路由的模板。路由定义时，须将其定义一下并export出去，才可用下面的路由判断拦截】

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

const router = new Router({
    routes: [ 
        {
            path: '/',
            component: index => require(['@/view/system/index'], index),
            meta: [{ parentName: '', name: '首页' }],
            children: [{
                    path: '/edit_detail',
                    name: 'edit_detail',
                    component: edit_detail => require(['@/view/system/info/edit_detail'], edit_detail),
                    meta: [{ parentName: '', name: '移动端中草药详情' }]
                }, {
                    path: '/edit_zcy',
                    name: 'edit_zcy',
                    component: edit_zcy => require(['@/view/system/info/edit_zcy'], edit_zcy),
                    meta: [{ parentName: '', name: '中草药示范园区简介' }]
                }
            ]
        },
        {
            path: "/login",
            name: "login",
            component: login => require(["@/view/system/login"], login),
            meta: [{ parentName: '', name: '登录' }],
        },

        },
    ]
})

router.beforeEach(function(to, from, next) {

    if (!localStorage.getItem("loginName")) {
        if (to.path !== '/login') {
            return next('/login')
        }
    }
    next()
})

export default router

四、路由拦截详解：在每个路由跳转时对当前路由进行判断，如果当前页面中不存在“登录成功时存储的信息”的话，则将其拦截至登录页面。

【还记得吗，当初我们登录成功就存储的是一个loginName】