資訊專欄INFORMATION COLUMN
摘要：具體實現(xiàn)請查看和的退出登陸回調(diào)方法。現(xiàn)在除了必要的頁面需要在一開始添加到路由表里，其他的頁面都可以根據(jù)后臺數(shù)據(jù)來自動生成。另外，如果在未登陸時要訪問某一指定頁面，會重定向到登陸頁，登陸成功后會自動跳到這個指定頁面。
項目地址 vue-admin-template
在線預(yù)覽
更新 2019.6.25 更新修復(fù)路由表沖突問題
退出當(dāng)前用戶，換賬號重新登陸時，上個賬號和現(xiàn)在的賬號路由表會有沖突的問題，解決辦法是在退出登陸時重置路由表。
具體實現(xiàn)請查看 router/index.js、Login.vue 和 Index.vue 的退出登陸回調(diào)方法。
2019.6.18 更新優(yōu)化動態(tài)添加路由功能
以前的動態(tài)路由功能并不完善，首先要將所有的路由都添加到路由表里，然后根據(jù)后臺返回的菜單欄數(shù)據(jù)來生成菜單。
導(dǎo)致的問題就是，雖然有頁面在菜單欄上不顯示，但由于已經(jīng)添加到路由表里了，所以可以在地址欄上手動輸入在菜單欄上不存在（但在路由表存在）的頁面，進而可以越權(quán)訪問。
現(xiàn)在除了必要的頁面需要在一開始添加到路由表里，其他的頁面都可以根據(jù)后臺數(shù)據(jù)來自動生成。而且菜單欄上沒有的頁面，在地址欄上輸入地址也是訪問不了的。
另外，如果在未登陸時要訪問某一指定頁面，會重定向到登陸頁，登陸成功后會自動跳到這個指定頁面。
具體實現(xiàn)請看 permission.js 和 util 目錄下的 index.js 文件
2019.3.14 更新增加404頁面
假如跳轉(zhuǎn)到一個不存在的頁面時會重定向到404頁面
2019.3.8 更新增加面包屑功能
用于展示當(dāng)前頁面的路徑
增加權(quán)限控制功能
如果未登陸，訪問所有頁面都重定向到登陸頁
2019.3.1 更新增加動態(tài)菜單欄功能
icon使用的是iview組件的icon組件。
數(shù)據(jù)格式：
// 左側(cè)菜單欄數(shù)據(jù)
menuItems: [
{
name: "Home", // 要跳轉(zhuǎn)的路由名稱 不是路徑
size: 18, // icon大小 非必填
type: "md-home", // icon類型 非必填
text: "主頁" // 文本內(nèi)容
},
{
text: "二級菜單",
type: "ios-paper",
children: [
{
type: "ios-grid",
name: "T1",
text: "表格"
},
{
text: "三級菜單",
type: "ios-paper",
children: [
{
type: "ios-notifications-outline",
name: "Msg",
text: "查看消息"
},
{
type: "md-lock",
name: "Password",
text: "修改密碼"
},
{
type: "md-person",
name: "UserInfo",
text: "基本資料",
}
]
}
]
}
]
相關(guān)依賴
vue-router
iview
axios
vuex
功能 登錄頁一周七天自動切換不同的壁紙（建議自己配置）
標(biāo)簽欄點擊標(biāo)簽切換頁面
刷新當(dāng)前標(biāo)簽頁
關(guān)閉其他標(biāo)簽/關(guān)閉所有標(biāo)簽
注意： 組件的名稱和路由的名稱一定要一致，例如 Home.vue 組件名稱 name: home，則在路由文件中也要給它設(shè)置為 name: home，否則頁面內(nèi)容不能緩存
// 在router文件中
{
path: "home",
name: "home",
component: () => import("../views/Home.vue")
}
// 在Home.vue中
export default {
name: "home"
}
側(cè)邊欄
伸展/收縮
頁面寬度過小自動收縮
多級菜單（利用iView組件）
用戶相關(guān)消息通知
用戶頭像
基本資料
動態(tài)菜單欄根據(jù)數(shù)據(jù)動態(tài)生成菜單
面包屑展示當(dāng)前頁面的路徑
權(quán)限控制如果在未登陸的情況下訪問指定頁面 將會重定向到登陸頁
其它利用axios攔截器 實現(xiàn)了ajax請求前展示loading 請求結(jié)束關(guān)閉loading
注意源碼可見 并且添加了必要的注釋 可以自行更改
Index組件一般情況下只需要傳數(shù)據(jù)就行 其他不用關(guān)注
市面上有大量的vue后臺管理系統(tǒng)模板 但是功能都太豐富了 而且有很多組件用不上 所以寫了這么一個最基礎(chǔ)的 只有必要功能的模板
UI庫使用的是iView 有大量的組件可用
// xxx為你想跳轉(zhuǎn)的子組件name
this.$parent.gotoPage("xxx")
路由傳參
this.gotoPage("userinfo", {
id: id,
})
// 在userinfo組件里取參
this.$route.params.id
使用
下載
git clone git@github.com:woai3c/vue-admin-template.git cd vue-admin-template npm i開發(fā)
npm run serve打包
npm run build如果對你有幫助，請給個Star
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/100396.html
摘要：如果一個頁面，有角色越權(quán)訪問，這時就得做出限制了。我們可以通過或來實現(xiàn)，下面用代碼來展示一下如何用控制登陸驗證。 更多文章 頁面權(quán)限控制 頁面權(quán)限控制是什么意思呢？ 就是一個網(wǎng)站有不同的角色，比如管理員和普通用戶，要求不同的角色能訪問的頁面是不一樣的。如果一個頁面，有角色越權(quán)訪問，這時就得做出限制了。 Vue 動態(tài)添加路由及生成菜單這是我寫過的一篇文章，通過動態(tài)添加路由和菜單來做控制，...
摘要：前言本文的前身是源自上的項目但由于該項目上次更新時間為年月日，很多內(nèi)容早已過期或是很多近期優(yōu)秀組件未被收錄，所以小肆今天重新更新了內(nèi)容并新建項目。提交的項目格式如下項目名稱子標(biāo)題相關(guān)介紹如果收錄的項目有錯誤，可以通過反饋給小肆。 前言 本文的前身是源自github上的項目awesome-github-vue,但由于該項目上次更新時間為2017年6月12日，很多內(nèi)容早已過期或是很多近期優(yōu)...
摘要：純前端開發(fā)主要是針對靜態(tài)頁面。自主權(quán)最大，正常是使用進行輔助開發(fā)，上線等。大致原因使用是為了和端的保持同步。四總結(jié)對于比較正式的項目，前端技術(shù)選型策略一定是產(chǎn)品收益最大化，用戶在首位。 對于前端團隊，可以實現(xiàn)企業(yè)受益最大化要點。 一、技術(shù)選型的策略 1、保證產(chǎn)品質(zhì)量 （1）功能穩(wěn)?。壕W(wǎng)頁不白屏，不錯位，不卡死；操作正常；數(shù)據(jù)精準(zhǔn)。 （2）體驗優(yōu)秀：加載體驗，交互體驗，視覺體驗，無障礙訪...
摘要：簡介最近寫了一個基于權(quán)限管理系統(tǒng)的后臺模板，包含了正常項目開發(fā)所需的框架功能，開發(fā)者使用的時候只需要專注于項目的業(yè)務(wù)邏輯就好。同時接下來會讓你擁有一個自己完全掌控的框架。 簡介 最近寫了一個基于vue2.0+element-ui權(quán)限管理系統(tǒng)的后臺模板，包含了正常項目開發(fā)所需的框架功能，開發(fā)者使用的時候只需要專注于項目的業(yè)務(wù)邏輯就好。同時接下來會讓你擁有一個自己完全掌控的框架。 源碼地址...
閱讀 4049·2021-11-11 10:58
閱讀 3502·2021-09-26 09:46
閱讀 1993·2019-08-30 15:55
閱讀 1080·2019-08-30 13:52
閱讀 2065·2019-08-29 13:11
閱讀 3110·2019-08-29 11:27
閱讀 1643·2019-08-26 18:18
閱讀 2792·2019-08-23 14:17
