vue中常見的問題及解決方法總結(jié)(推薦)
有一些問題不限于 Vue,還適應(yīng)于其他類型的 SPA 項目。
1. 頁面權(quán)限控制和登陸驗證頁面權(quán)限控制
頁面權(quán)限控制是什么意思呢?
就是一個網(wǎng)站有不同的角色,比如管理員和普通用戶,要求不同的角色能訪問的頁面是不一樣的。如果一個頁面,有角色越權(quán)訪問,這時就得做出限制了。
一種方法是通過動態(tài)添加路由和菜單來做控制,不能訪問的頁面不添加到路由表里,這是其中一種辦法。具體細節(jié)請看下一節(jié)的《動態(tài)菜單》。
另一種辦法就是所有的頁面都在路由表里,只是在訪問的時候要判斷一下角色權(quán)限。如果有權(quán)限就允許訪問,沒有權(quán)限就拒絕,跳轉(zhuǎn)到 404 頁面。
思路
在每一個路由的meta屬性里,將能訪問該路由的角色添加到roles里。用戶每次登陸后,將用戶的角色返回。然后在訪問頁面時,把路由的meta屬性和用戶的角色進行對比,如果用戶的角色在路由的roles里,那就是能訪問,如果不在就拒絕訪問。
代碼示例
路由信息
routes: [
{
path: '/login',
name: 'login',
meta: {
roles: ['admin', 'user']
},
component: () => import('../components/Login.vue')
},
{
path: 'home',
name: 'home',
meta: {
roles: ['admin']
},
component: () => import('../views/Home.vue')
},
]
頁面控制
// 假設(shè)角色有兩種:admin 和 user
// 這里是從后臺獲取的用戶角色
const role = 'user'
// 在進入一個頁面前會觸發(fā) router.beforeEach 事件
router.beforeEach((to, from, next) => {
if (to.meta.roles.includes(role)) {
next()
} else {
next({path: '/404'})
}
})
登陸驗證
網(wǎng)站一般只要登陸過一次后,接下來該網(wǎng)站的其他頁面都是可以直接訪問的,不用再次登陸。我們可以通過token或cookie來實現(xiàn),下面用代碼來展示一下如何用token控制登陸驗證。
router.beforeEach((to, from, next) => {
// 如果有token 說明該用戶已登陸
if (localStorage.getItem('token')) {
// 在已登陸的情況下訪問登陸頁會重定向到首頁
if (to.path === '/login') {
next({path: '/'})
} else {
next({path: to.path || '/'})
}
} else {
// 沒有登陸則訪問任何頁面都重定向到登陸頁
if (to.path === '/login') {
next()
} else {
next(`/login?redirect=${to.path}`)
}
}
})
2. 動態(tài)菜單
寫后臺管理系統(tǒng),估計有不少人遇過這樣的需求:根據(jù)后臺數(shù)據(jù)動態(tài)添加路由和菜單。為什么這么做呢?因為不同的用戶有不同的權(quán)限,能訪問的頁面是不一樣的。
動態(tài)添加路由
利用 vue-router 的addRoutes方法可以動態(tài)添加路由。
先看一下官方介紹:
router.addRoutes
router.addRoutes(routes: Array<RouteConfig>)
動態(tài)添加更多的路由規(guī)則。參數(shù)必須是一個符合routes選項要求的數(shù)組。
舉個例子:
const router = new Router({
routes: [
{
path: '/login',
name: 'login',
component: () => import('../components/Login.vue')
},
{path: '/', redirect: '/home'},
]
})
上面的代碼和下面的代碼效果是一樣的
const router = new Router({
routes: [
{path: '/', redirect: '/home'},
]
})
router.addRoutes([
{
path: '/login',
name: 'login',
component: () => import('../components/Login.vue')
}
])
在動態(tài)添加路由的過程中,如果有 404 頁面,一定要放在最后添加,否則在登陸的時候添加完頁面會重定向到 404 頁面。
類似于這樣,這種規(guī)則一定要最后添加。
{path: '*', redirect: '/404'}
動態(tài)生成菜單
假設(shè)后臺返回來的數(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: '查看消息'
},
]
}
]
}
]
來看看怎么將它轉(zhuǎn)化為菜單欄,我在這里使用了iview的組件,不用重復(fù)造輪子。
<!-- 菜單欄 -->
<Menu ref="asideMenu" theme="dark" width="100%" @on-select="gotoPage"
accordion :open-names="openMenus" :active-name="currentPage" @on-open-change="menuChange">
<!-- 動態(tài)菜單 -->
<div v-for="(item, index) in menuItems" :key="index">
<Submenu v-if="item.children" :name="index">
<template slot="title">
<Icon :size="item.size" :type="item.type"/>
<span v-show="isShowAsideTitle">{{item.text}}</span>
</template>
<div v-for="(subItem, i) in item.children" :key="index + i">
<Submenu v-if="subItem.children" :name="index + '-' + i">
<template slot="title">
<Icon :size="subItem.size" :type="subItem.type"/>
<span v-show="isShowAsideTitle">{{subItem.text}}</span>
</template>
<MenuItem class="menu-level-3" v-for="(threeItem, k) in subItem.children" :name="threeItem.name" :key="index + i + k">
<Icon :size="threeItem.size" :type="threeItem.type"/>
<span v-show="isShowAsideTitle">{{threeItem.text}}</span>
</MenuItem>
</Submenu>
<MenuItem v-else v-show="isShowAsideTitle" :name="subItem.name">
<Icon :size="subItem.size" :type="subItem.type"/>
<span v-show="isShowAsideTitle">{{subItem.text}}</span>
</MenuItem>
</div>
</Submenu>
<MenuItem v-else :name="item.name">
<Icon :size="item.size" :type="item.type" />
<span v-show="isShowAsideTitle">{{item.text}}</span>
</MenuItem>
</div>
</Menu>
代碼不用看得太仔細,理解原理即可,其實就是通過三次v-for不停的對子數(shù)組進行循環(huán),生成三級菜單。
不過這個動態(tài)菜單有缺陷,就是只支持三級菜單。一個更好的做法是把生成菜單的過程封裝成組件,然后遞歸調(diào)用,這樣就能支持無限級的菜單。在生菜菜單時,需要判斷一下是否還有子菜單,如果有就遞歸調(diào)用組件。
動態(tài)路由因為上面已經(jīng)說過了用addRoutes來實現(xiàn),現(xiàn)在看看具體怎么做。
首先,要把項目所有的頁面路由都列出來,再用后臺返回來的數(shù)據(jù)動態(tài)匹配,能匹配上的就把路由加上,不能匹配上的就不加。最后把這個新生成的路由數(shù)據(jù)用addRoutes添加到路由表里。
const asyncRoutes = {
'home': {
path: 'home',
name: 'home',
component: () => import('../views/Home.vue')
},
't1': {
path: 't1',
name: 't1',
component: () => import('../views/T1.vue')
},
'password': {
path: 'password',
name: 'password',
component: () => import('../views/Password.vue')
},
'msg': {
path: 'msg',
name: 'msg',
component: () => import('../views/Msg.vue')
},
'userinfo': {
path: 'userinfo',
name: 'userinfo',
component: () => import('../views/UserInfo.vue')
}
}
// 傳入后臺數(shù)據(jù) 生成路由表
menusToRoutes(menusData)
// 將菜單信息轉(zhuǎn)成對應(yīng)的路由信息 動態(tài)添加
function menusToRoutes(data) {
const result = []
const children = []
result.push({
path: '/',
component: () => import('../components/Index.vue'),
children,
})
data.forEach(item => {
generateRoutes(children, item)
})
children.push({
path: 'error',
name: 'error',
component: () => import('../components/Error.vue')
})
// 最后添加404頁面 否則會在登陸成功后跳到404頁面
result.push(
{path: '*', redirect: '/error'},
)
return result
}
function generateRoutes(children, item) {
if (item.name) {
children.push(asyncRoutes[item.name])
} else if (item.children) {
item.children.forEach(e => {
generateRoutes(children, e)
})
}
}
動態(tài)菜單的代碼實現(xiàn)放在 github 上,分別放在這個項目的src/components/Index.vue、src/permission.js和src/utils/index.js文件里。
3. 前進刷新后退不刷新需求一:
在一個列表頁中,第一次進入的時候,請求獲取數(shù)據(jù)。
點擊某個列表項,跳到詳情頁,再從詳情頁后退回到列表頁時,不刷新。
也就是說從其他頁面進到列表頁,需要刷新獲取數(shù)據(jù),從詳情頁返回到列表頁時不要刷新。
解決方案
在App.vue設(shè)置:
<keep-alive include="list"> <router-view/> </keep-alive>
假設(shè)列表頁為list.vue,詳情頁為detail.vue,這兩個都是子組件。
我們在keep-alive添加列表頁的名字,緩存列表頁。
然后在列表頁的created函數(shù)里添加 ajax 請求,這樣只有第一次進入到列表頁的時候才會請求數(shù)據(jù),當(dāng)從列表頁跳到詳情頁,再從詳情頁回來的時候,列表頁就不會刷新。這樣就可以解決問題了。
需求二:
在需求一的基礎(chǔ)上,再加一個要求:可以在詳情頁中刪除對應(yīng)的列表項,這時返回到列表頁時需要刷新重新獲取數(shù)據(jù)。
我們可以在路由配置文件上對detail.vue增加一個meta屬性。
{
path: '/detail',
name: 'detail',
component: () => import('../view/detail.vue'),
meta: {isRefresh: true}
},
這個meta屬性,可以在詳情頁中通過this.$route.meta.isRefresh來讀取和設(shè)置。
設(shè)置完這個屬性,還要在App.vue文件里設(shè)置 watch 一下$route屬性。
watch: {
$route(to, from) {
const fname = from.name
const tname = to.name
if (from.meta.isRefresh || (fname != 'detail' && tname == 'list')) {
from.meta.isRefresh = false
// 在這里重新請求數(shù)據(jù)
}
}
},
這樣就不需要在列表頁的created函數(shù)里用 ajax 來請求數(shù)據(jù)了,統(tǒng)一放在App.vue里來處理。
觸發(fā)請求數(shù)據(jù)有兩個條件:
從其他頁面(除了詳情頁)進來列表時,需要請求數(shù)據(jù)。從詳情頁返回到列表頁時,如果詳情頁meta屬性中的isRefresh為true,也需要重新請求數(shù)據(jù)。
當(dāng)我們在詳情頁中刪除了對應(yīng)的列表項時,就可以將詳情頁meta屬性中的isRefresh設(shè)為true。這時再返回到列表頁,頁面會重新刷新。
解決方案二
對于需求二其實還有一個更簡潔的方案,那就是使用 router-view 的key屬性。
<keep-alive> <router-view :key="$route.fullPath"/> </keep-alive>
首先 keep-alive 讓所有頁面都緩存,當(dāng)你不想緩存某個路由頁面,要重新加載它時,可以在跳轉(zhuǎn)時傳一個隨機字符串,這樣它就能重新加載了。例如從列表頁進入了詳情頁,然后在詳情頁中刪除了列表頁中的某個選項,此時從詳情頁退回列表頁時就要刷新,我們可以這樣跳轉(zhuǎn):
this.$router.push({
path: '/list',
query: { 'randomID': 'id' + Math.random() },
})
這樣的方案相對來說還是更簡潔的。
4. 多個請求下 loading 的展示與關(guān)閉
一般情況下,在 vue 中結(jié)合 axios 的攔截器控制 loading 展示和關(guān)閉,是這樣的:
在App.vue配置一個全局 loading。
<div class="app"> <keep-alive :include="keepAliveData"> <router-view/> </keep-alive> <div class="loading" v-show="isShowLoading"> <Spin size="large"></Spin> </div> </div>
同時設(shè)置 axios 攔截器。
// 添加請求攔截器
this.$axios.interceptors.request.use(config => {
this.isShowLoading = true
return config
}, error => {
this.isShowLoading = false
return Promise.reject(error)
})
// 添加響應(yīng)攔截器
this.$axios.interceptors.response.use(response => {
this.isShowLoading = false
return response
}, error => {
this.isShowLoading = false
return Promise.reject(error)
})
這個攔截器的功能是在請求前打開 loading,請求結(jié)束或出錯時關(guān)閉 loading。
如果每次只有一個請求,這樣運行是沒問題的。但同時有多個請求并發(fā),就會有問題了。
舉例:
假如現(xiàn)在同時發(fā)起兩個請求,在請求前,攔截器this.isShowLoading = true將 loading 打開。
現(xiàn)在有一個請求結(jié)束了。this.isShowLoading = false攔截器關(guān)閉 loading,但是另一個請求由于某些原因并沒有結(jié)束。
造成的后果就是頁面請求還沒完成,loading 卻關(guān)閉了,用戶會以為頁面加載完成了,結(jié)果頁面不能正常運行,導(dǎo)致用戶體驗不好。
解決方案
增加一個loadingCount變量,用來計算請求的次數(shù)。
loadingCount: 0
再增加兩個方法,來對loadingCount進行增減操作。
methods: {
addLoading() {
this.isShowLoading = true
this.loadingCount++
},
isCloseLoading() {
this.loadingCount--
if (this.loadingCount == 0) {
this.isShowLoading = false
}
}
}
現(xiàn)在攔截器變成這樣:
// 添加請求攔截器
this.$axios.interceptors.request.use(config => {
this.addLoading()
return config
}, error => {
this.isShowLoading = false
this.loadingCount = 0
this.$Message.error('網(wǎng)絡(luò)異常,請稍后再試')
return Promise.reject(error)
})
// 添加響應(yīng)攔截器
this.$axios.interceptors.response.use(response => {
this.isCloseLoading()
return response
}, error => {
this.isShowLoading = false
this.loadingCount = 0
this.$Message.error('網(wǎng)絡(luò)異常,請稍后再試')
return Promise.reject(error)
})
這個攔截器的功能是:
每當(dāng)發(fā)起一個請求,打開 loading,同時loadingCount加1。
每當(dāng)一個請求結(jié)束,loadingCount減1,并判斷 loadingCount是否為 0,如果為 0,則關(guān)閉 loading。
這樣即可解決,多個請求下有某個請求提前結(jié)束,導(dǎo)致 loading 關(guān)閉的問題。
5. 表格打印
打印需要用到的組件為 print-js
普通表格打印
一般的表格打印直接仿照組件提供的例子就可以了。
printJS({
printable: id, // DOM id
type: 'html',
scanStyles: false,
})
element-ui 表格打?。ㄆ渌M件庫的表格同理)
element-ui 的表格,表面上看起來是一個表格,實際上是由兩個表格組成的。
表頭為一個表格,表體又是個表格,這就導(dǎo)致了一個問題:打印的時候表體和表頭錯位。

另外,在表格出現(xiàn)滾動條的時候,也會造成錯位。

解決方案
我的思路是將兩個表格合成一個表格,print-js組件打印的時候,實際上是把 id 對應(yīng)的 DOM 里的內(nèi)容提取出來打印。所以,在傳入 id 之前,可以先把表頭所在的表格內(nèi)容提取出來,插入到第二個表格里,從而將兩個表格合并,這時候打印就不會有錯位的問題了。
function printHTML(id) {
const html = document.querySelector('#' + id).innerHTML
// 新建一個 DOM
const div = document.createElement('div')
const printDOMID = 'printDOMElement'
div.id = printDOMID
div.innerHTML = html
// 提取第一個表格的內(nèi)容 即表頭
const ths = div.querySelectorAll('.el-table__header-wrapper th')
const ThsTextArry = []
for (let i = 0, len = ths.length; i < len; i++) {
if (ths[i].innerText !== '') ThsTextArry.push(ths[i].innerText)
}
// 刪除多余的表頭
div.querySelector('.hidden-columns').remove()
// 第一個表格的內(nèi)容提取出來后已經(jīng)沒用了 刪掉
div.querySelector('.el-table__header-wrapper').remove()
// 將第一個表格的內(nèi)容插入到第二個表格
let newHTML = '<tr>'
for (let i = 0, len = ThsTextArry.length; i < len; i++) {
newHTML += '<td style="text-align: center; font-weight: bold">' + ThsTextArry[i] + '</td>'
}
newHTML += '</tr>'
div.querySelector('.el-table__body-wrapper table').insertAdjacentHTML('afterbegin', newHTML)
// 將新的 DIV 添加到頁面 打印后再刪掉
document.querySelector('body').appendChild(div)
printJS({
printable: printDOMID,
type: 'html',
scanStyles: false,
style: 'table { border-collapse: collapse }' // 表格樣式
})
div.remove()
}
6. 下載二進制文件
平時在前端下載文件有兩種方式,一種是后臺提供一個 URL,然后用window.open(URL)下載,另一種就是后臺直接返回文件的二進制內(nèi)容,然后前端轉(zhuǎn)化一下再下載。
由于第一種方式比較簡單,在此不做探討。本文主要講解一下第二種方式怎么實現(xiàn)。
第二種方式需要用到 Blob 對象, mdn 文檔上是這樣介紹的:
Blob 對象表示一個不可變、原始數(shù)據(jù)的類文件對象。Blob 表示的不一定是JavaScript原生格式的數(shù)據(jù)
具體使用方法
axios({
method: 'post',
url: '/export',
})
.then(res => {
// 假設(shè) data 是返回來的二進制數(shù)據(jù)
const data = res.data
const url = window.URL.createObjectURL(new Blob([data], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"}))
const link = document.createElement('a')
link.style.display = 'none'
link.href = url
link.setAttribute('download', 'excel.xlsx')
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
})
打開下載的文件,看看結(jié)果是否正確。

一堆亂碼...
一定有哪里不對。
最后發(fā)現(xiàn)是參數(shù) responseType 的問題,responseType 它表示服務(wù)器響應(yīng)的數(shù)據(jù)類型。由于后臺返回來的是二進制數(shù)據(jù),所以我們要把它設(shè)為 arraybuffer, 接下來再看看結(jié)果是否正確。
axios({
method: 'post',
url: '/export',
responseType: 'arraybuffer',
})
.then(res => {
// 假設(shè) data 是返回來的二進制數(shù)據(jù)
const data = res.data
const url = window.URL.createObjectURL(new Blob([data], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"}))
const link = document.createElement('a')
link.style.display = 'none'
link.href = url
link.setAttribute('download', 'excel.xlsx')
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
})

這次沒有問題,文件能正常打開,內(nèi)容也是正常的,不再是亂碼。
根據(jù)后臺接口內(nèi)容決定是否下載文件
作者的項目有大量的頁面都有下載文件的需求,而且這個需求還有點變態(tài)。
具體需求如下
- 如果下載文件的數(shù)據(jù)量條數(shù)符合要求,正常下載(每個頁面限制下載數(shù)據(jù)量是不一樣的,所以不能在前端寫死)。
- 如果文件過大,后臺返回 { code: 199999, msg: '文件過大,請重新設(shè)置查詢項', data: null },然后前端再進行報錯提示。
先來分析一下,首先根據(jù)上文,我們都知道下載文件的接口響應(yīng)數(shù)據(jù)類型為 arraybuffer。返回的數(shù)據(jù)無論是二進制文件,還是 JSON 字符串,前端接收到的其實都是 arraybuffer。所以我們要對 arraybuffer 的內(nèi)容作個判斷,在接收到數(shù)據(jù)時將它轉(zhuǎn)換為字符串,判斷是否有 code: 199999。如果有,則報錯提示,如果沒有,則是正常文件,下載即可。具體實現(xiàn)如下:
xios.interceptors.response.use(response => {
const res = response.data
// 判斷響應(yīng)數(shù)據(jù)類型是否 ArrayBuffer,true 則是下載文件接口,false 則是正常接口
if (res instanceof ArrayBuffer) {
const utf8decoder = new TextDecoder()
const u8arr = new Uint8Array(res)
// 將二進制數(shù)據(jù)轉(zhuǎn)為字符串
const temp = utf8decoder.decode(u8arr)
if (temp.includes('{code:199999')) {
Message({
// 字符串轉(zhuǎn)為 JSON 對象
message: JSON.parse(temp).msg,
type: 'error',
duration: 5000,
})
return Promise.reject()
}
}
// 正常類型接口,省略代碼...
return res
}, (error) => {
// 省略代碼...
return Promise.reject(error)
})
7. 自動忽略 console.log 語句
export function rewirteLog() {
console.log = (function (log) {
return process.env.NODE_ENV == 'development'? log : function() {}
}(console.log))
}
在 main.js 引入這個函數(shù)并執(zhí)行一次,就可以實現(xiàn)忽略 console.log 語句的效果。
總結(jié)
到此這篇關(guān)于vue中常見的問題及解決方法的文章就介紹到這了,更多相關(guān)vue常見問題內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue+canvas實現(xiàn)數(shù)據(jù)實時從上到下刷新瀑布圖效果(類似QT的)
這篇文章主要介紹了vue+canvas實現(xiàn)數(shù)據(jù)實時從上到下刷新瀑布圖效果(類似QT的),文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
Nuxt封裝@nuxtjs/axios請求后端數(shù)據(jù)方式
這篇文章主要介紹了Nuxt封裝@nuxtjs/axios請求后端數(shù)據(jù)方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
vue三元運算之多重條件判斷方式(多個枚舉值轉(zhuǎn)譯)
這篇文章主要介紹了vue三元運算之多重條件判斷方式(多個枚舉值轉(zhuǎn)譯),具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-09-09
vue中使用element組件時事件想要傳遞其他參數(shù)的問題
這篇文章主要介紹了vue中使用element組件時事件想要傳遞其他參數(shù)的問題,本文給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下2019-09-09
vue項目打包后,由于html被緩存導(dǎo)致出現(xiàn)白屏的處理方案
這篇文章主要介紹了vue項目打包后,由于html被緩存導(dǎo)致出現(xiàn)白屏的處理方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-03-03

