一、data數(shù)據(jù)定義userInfo成一個對象，包含賬號與密碼兩個屬性：

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

二、賬號密碼，采用對象里的屬性綁定。此處我用的是element-ui，外層特定的標(biāo)簽名稱不要糾結(jié)：

數(shù)據(jù)綁定

其中點(diǎn)擊登錄的onSubmit的方法中，若成功登錄，則在localStorage中存儲：

存儲用戶登錄信息

三、在路由跳轉(zhuǎn)時，判斷一下當(dāng)前的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: '中草藥示范園區(qū)簡介' }]
                }
            ]
        },
        {
            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

四、路由攔截詳解：在每個路由跳轉(zhuǎn)時對當(dāng)前路由進(jìn)行判斷，如果當(dāng)前頁面中不存在“登錄成功時存儲的信息”的話，則將其攔截至登錄頁面。

【還記得嗎，當(dāng)初我們登錄成功就存儲的是一個loginName】

路由攔截

就是他媽的這么精彩