vue實現登入功能，且重新整理頁面不丟失資料

github：

專案說明：姓名: customer1或customer2或customer3

密碼: 123321

目錄結構：

大致流程：

登入頁面的狀態管理機，在此頁面執行登入功能

// 根據令牌token換取登入資訊

async userinfo(context,token));

context.commit('refreshinfo',res.data)} }

}

工具目錄，用於將token令牌設定到本地儲存中

export function settoken(token)

export function gettoken()

路由，控制頁面跳轉，同時在此處可編寫**，防止頁面重新整理導致資料丟失

import vue from 'vue'

import vuerouter from 'vue-router'
// 登入配置
import login from '../views/login.vue'
import from '../utils/index'
import store from '../store'
vue.use(vuerouter)
const routes = [
, )
} else )}}
}]const router = new vuerouter()
export default router

登陸頁面，編寫相關事件

登入

為了使用者登陸後，在所有的頁面都能獲取到使用者資訊，可以將專案目錄設定成如下格式

路由的配置如下：

即使用者在進入每個頁面時，都會經過manager，都會執行根據token獲取使用者資訊的**，所以做到了任意頁面都可以獲取到使用者資料的效果

Vue重新整理頁面功能

在使用vue開發過程中，有時候修改了一些資料或者提交了表單以後需要重新整理當前頁面，js中有很多方法都可以重新整理頁面，但是我覺得都不是很友好，會突然整個頁面白了一下，相當於按了f5重新整理頁面。最近看到了大神們的做法，也實現了一下，感覺挺不錯的。isrouteralive router view ...

vue中重新整理頁面

當我們頁面中有資料發生變化或者進行了某些操作的時候，需要將變化後的結果展示，也就是重新整理頁面，像f5這種重新整理會導致頁面閃爍，還有 window.reload 或者router.go 0 重新整理時也是，使用者體驗很差，所以我們需要一種頁面不抖動的重新整理方式 解決辦法 在需要的地方使用this...

在不重新整理頁面的情況下，更新頁面

先註冊乙個名為redirect的路由 export default this route const params this router.replace render function h script 手動重定向頁面到 redirect頁面 const this route this route...