一、data數據定義user成一個對象，添加兩個屬性(username,password)
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
四、路由攔截詳解：在每個路由跳轉時對當前路由進行判斷，如果當前頁面中不存在“登錄成功時存儲的信息”的話，則將其攔截至登錄頁面
