資訊專(zhuān)欄INFORMATION COLUMN
摘要：載入前后在階段，實(shí)例的和都初始化了，但還是掛載之前為虛擬的節(jié)點(diǎn)，還未替換。類(lèi)似于，不同在于提交的是，而不是直接變更狀態(tài)可以包含任意異步操作。
vue基礎(chǔ)
1、 router 路由與 a 標(biāo)簽的區(qū)別：https://www.jianshu.com/p/34b...
2、 VUE雙向綁定的原理：
答：VUE實(shí)現(xiàn)雙向數(shù)據(jù)綁定的原理就是利用了 Object.defineProperty() 這個(gè)方法重新定義了對(duì)象獲取屬性值(get)和設(shè)置屬性值(set)的操作來(lái)實(shí)現(xiàn)的。Vue的雙向數(shù)據(jù)綁定就是只要在讀取值（getter）時(shí)收集觀察者，在賦值（setter）時(shí)觸發(fā)觀察者更新函數(shù)，就可以實(shí)現(xiàn)數(shù)據(jù)變更，從而實(shí)現(xiàn)DOM重新渲染。
3、vue2.0中router-link詳解：https://blog.csdn.net/lhjueji...
4、 vue項(xiàng)目開(kāi)發(fā)前的es6的知識(shí)儲(chǔ)備:https://www.cnblogs.com/untir...
5、 箭頭函數(shù)和普通函數(shù)的區(qū)別：https://www.jianshu.com/p/73c...
總結(jié)：
1>箭頭函數(shù)寫(xiě)代碼擁有更加簡(jiǎn)潔的語(yǔ)法；
2>箭頭函數(shù)的this永遠(yuǎn)指向其上下文的 this，任何方法都改變不了其指向，如call(), bind(), apply(); 普通函數(shù)的this指向調(diào)用它的那個(gè)對(duì)象
6、Vue的生命周期，詳細(xì)介紹各個(gè)階段
創(chuàng)建前/后
在beforeCreated階段，vue實(shí)例的掛載元素$el和數(shù)據(jù)對(duì)象data都為undefined，還未初始化。
在created階段，vue實(shí)例的數(shù)據(jù)對(duì)象data有了，$el還沒(méi)有。
載入前/后
在beforeMount階段，vue實(shí)例的$el和data都初始化了，但還是掛載之前為虛擬的dom節(jié)點(diǎn)，data.message還未替換。
在mounted階段，vue實(shí)例掛載完成，data.message成功渲染。
更新前/后
當(dāng)data變化時(shí)，會(huì)觸發(fā)beforeUpdate和updated方法。
銷(xiāo)毀前/后
在執(zhí)行destroy方法后，對(duì)data的改變不會(huì)再觸發(fā)周期函數(shù)，說(shuō)明此時(shí)vue實(shí)例已經(jīng)解除了事件監(jiān)聽(tīng)以及和dom的綁定，但是dom結(jié)構(gòu)依然存在
它可以總共分為8個(gè)階段：創(chuàng)建前/后, 載入前/后,更新前/后,銷(xiāo)毀前/銷(xiāo)毀后.
7、簡(jiǎn)單描述每個(gè)周期具體適合哪些場(chǎng)景？
生命周期鉤子的一些使用方法：
beforecreate : 可以在這加個(gè)loading事件，在加載實(shí)例時(shí)觸發(fā)
created : 初始化完成時(shí)的事件寫(xiě)在這里，如在這結(jié)束loading事件，異步請(qǐng)求也適宜在這里調(diào)用
mounted : 掛載元素，獲取到DOM節(jié)點(diǎn)
updated : 如果對(duì)數(shù)據(jù)統(tǒng)一處理，在這里寫(xiě)上相應(yīng)函數(shù)
beforeDestroy : 可以做一個(gè)確認(rèn)停止事件的確認(rèn)框
nextTick : 更新數(shù)據(jù)后立即操作dom
8、 vue-router實(shí)現(xiàn)原理
根據(jù)url來(lái)path匹配相應(yīng)的 component ，在把匹配到的component渲染到指定的dom上就好了
vue-router是vue的路由插件,組件：router-link router-view說(shuō)簡(jiǎn)單點(diǎn)，vue-router的原理就是通過(guò)對(duì)URL地址變化的監(jiān)聽(tīng)，繼而對(duì)不同的組件進(jìn)行渲染。每當(dāng)URL地址改變時(shí)，就對(duì)相應(yīng)的組件進(jìn)行渲染。原理是很簡(jiǎn)單，實(shí)現(xiàn)方式可能有點(diǎn)復(fù)雜，主要有hash模式和history模式。
9、Vuex各個(gè)狀態(tài)
有 5 種，分別是 state、getter、mutation、action、modulestate Vuex 使用單一狀態(tài)樹(shù)，既每個(gè)應(yīng)用將僅僅包含一個(gè)store實(shí)例，單單一狀態(tài)樹(shù)和模塊化并不沖突。存放的數(shù)據(jù)狀態(tài)，不可以直接修改里面的數(shù)據(jù)。
mutations mutations定義的方法動(dòng)態(tài)修改Vuex的store中的狀態(tài)或數(shù)據(jù)。
getters 類(lèi)似vue的計(jì)算屬性，主要用來(lái)過(guò)濾一些數(shù)據(jù)。
action action可以理解為通過(guò)mutations里面處理數(shù)據(jù)的方法變成可異步的處理數(shù)據(jù)的方法，簡(jiǎn)單的說(shuō)就是異步操作數(shù)據(jù)。view層通過(guò)store.dispath來(lái)分配action。Action 類(lèi)似于 mutation，不同在于：Action 提交的是 mutation，而不是直接變更狀態(tài)；Action 可以包含任意異步操作。
modeules 項(xiàng)目特別復(fù)雜的時(shí)候，可以讓每一個(gè)模塊擁有自己的state,mutation,action,getters，使得結(jié)構(gòu)非常清晰，方便管理
10、axios是什么？怎么使用？描述使用它實(shí)現(xiàn)登錄功能的流程
axios是請(qǐng)求后臺(tái)資源的模塊。 npm i axios -S
如果發(fā)送的是跨域請(qǐng)求，需在配置文件中 config/index.js 進(jìn)行配置
11、兄弟組件，父子傳值
父---子 父組件通過(guò)標(biāo)簽傳值，子組件通過(guò)props接收
子---父 通過(guò)this.$emit將方法和數(shù)據(jù)傳遞給父組件，父組件通過(guò)$on接收1.父組件與子組件傳值
父組件傳給子組件： 子組件通過(guò)props方法接受數(shù)據(jù)；
子組件傳給父組件：$emit方法傳遞參數(shù);
2.非父子組件間的數(shù)據(jù)傳遞，兄弟組件傳值
EventBus，就是創(chuàng)建一個(gè)事件中心，相當(dāng)于中轉(zhuǎn)站，可以用它來(lái)傳遞事件和接受事件，項(xiàng)目比較小時(shí)，用這個(gè)比較合適；
VueX，創(chuàng)建一個(gè)數(shù)據(jù)倉(cāng)庫(kù)，整個(gè)項(xiàng)目全局都可以往這個(gè)倉(cāng)庫(kù)存放數(shù)據(jù)和讀取數(shù)據(jù)
如果父組件想要調(diào)用子組件的方法
vue會(huì)給子組件添加一個(gè)ref屬性，通過(guò)this.$refs.ref的值便可以獲取到該子組件，然后便可以調(diào)用子組件中的任意方法
12、vue怎么實(shí)現(xiàn)頁(yè)面的權(quán)限控制
利用 vue-router 的 beforeEach 事件，可以在跳轉(zhuǎn)頁(yè)面前判斷用戶的權(quán)限（利用 cookie 或 token），是否能夠進(jìn)入此頁(yè)面，如果不能則提示錯(cuò)誤或重定向到其他頁(yè)面，在后臺(tái)管理系統(tǒng)中這種場(chǎng)景經(jīng)常能遇到。
13、vue里面的虛擬dom
簡(jiǎn)單來(lái)說(shuō)，虛擬DOM是用Object來(lái)代表一顆節(jié)點(diǎn)，這個(gè)Object叫做VNode，然后使用兩個(gè)VNode進(jìn)行對(duì)比，根據(jù)對(duì)比后的結(jié)果修改真實(shí)DOM。為什么是兩個(gè)VNode？因?yàn)槊看武秩径紩?huì)生成一個(gè)新的VNode，然后和上一次渲染時(shí)用的VNode進(jìn)行對(duì)比。然后將這一次新生成的VNode緩存，用來(lái)進(jìn)行下一次對(duì)比。
14、vue中scoped的原理：https://www.jianshu.com/p/b92...
加了 scoped 的話，編譯的時(shí)候就把對(duì)應(yīng)的選擇器和對(duì)應(yīng)的元素綁定一個(gè)由全局唯一的字符串產(chǎn)生的屬性。vue通過(guò)在DOM結(jié)構(gòu)以及css樣式上加上唯一的標(biāo)記，保證唯一，達(dá)到樣式私有化，不污染全局的作用
15、如何解決vue開(kāi)發(fā)中父組件添加scoped后無(wú)法修改子組件樣式問(wèn)題
父組件：使用深度作用選擇器
http://www.php.cn/js-tutorial...
https://www.cnblogs.com/ruish...
子組件：
16、Vue國(guó)際化處理 vue-i18n 以及項(xiàng)目自動(dòng)切換中英文
https://www.cnblogs.com/nxmin...
https://www.cnblogs.com/wangw...
17、Vue實(shí)現(xiàn)組件信息的緩存
https://blog.csdn.net/u014628...
18、Vue中data和computed的區(qū)別
https://segmentfault.com/a/11...
data 和 computed都是響應(yīng)式的
data中的屬性并不會(huì)隨賦值變量的改動(dòng)而改動(dòng);當(dāng)需要這種隨賦值變量的改動(dòng)而改動(dòng)的時(shí)候，還是用計(jì)算屬性computed合適
如果實(shí)在要在data里面聲明屬性，可以先賦一個(gè)值，然后在methods里面定義方法操作該屬性，效果等同，也會(huì)有響應(yīng)式
var vm = new Vue({
el: "#app",
data: {
firstname: "",
lastname: ""
},
methods: {
},
watch: {
},
computed:{
// 在 computed 中，可以定義一些 屬性，這些屬性，叫做 【計(jì)算屬性】， 計(jì)算屬性的，本質(zhì)，就是 一個(gè)方法，只不過(guò)，我們?cè)谑褂?這些計(jì)算屬性的時(shí)候，是把 它們的 名稱，直接當(dāng)作 屬性來(lái)使用的；并不會(huì)把 計(jì)算屬性，當(dāng)作方法去調(diào)用；
// 注意1： 計(jì)算屬性，在引用的時(shí)候，一定不要加 () 去調(diào)用，直接把它 當(dāng)作 普通 屬性去使用就好了；
// 注意2： 只要 計(jì)算屬性，這個(gè) function 內(nèi)部，所用到的 任何 data 中的數(shù)據(jù)發(fā)送了變化，就會(huì) 立即重新計(jì)算 這個(gè) 計(jì)算屬性的值
// 注意3： 計(jì)算屬性的求值結(jié)果，會(huì)被緩存起來(lái)，方便下次直接使用； 如果 計(jì)算屬性方法中，所以來(lái)的任何數(shù)據(jù)，都沒(méi)有發(fā)生過(guò)變化，則，不會(huì)重新對(duì) 計(jì)算屬性求值；
"fullname":function () {
return this.firstname+this.lastname;
}
}
})
19、后臺(tái)管理系統(tǒng)登錄、權(quán)限：
https://juejin.im/post/591aa1...
https://www.cnblogs.com/heroz...
20、Axios封裝：https://blog.csdn.net/qq_3814...
1、首先，在vue-cli項(xiàng)目的src路徑下新建一個(gè)axios文件夾，在axios文件夾里新建aps.js和request.js，api.js用于寫(xiě)接口，對(duì)axios的封裝寫(xiě)在request.js里
2、然后開(kāi)始統(tǒng)一封裝axios， 首先引入axios、qs依賴，引入main.js主要是用于后面對(duì)接口進(jìn)行統(tǒng)一處理，比如調(diào)接口的時(shí)候，顯示loading等。
3、然后創(chuàng)建一個(gè)axios實(shí)例，這個(gè)process.env.BASE_URL在config/dev.evn.js、prod.evn.js里面進(jìn)行配置
4、axios實(shí)例創(chuàng)建好之后，開(kāi)始使用request攔截器對(duì)axios請(qǐng)求配置做統(tǒng)一處理，然后是對(duì)response做統(tǒng)一處理
5、最后，將我們的axios實(shí)例暴露出去，整個(gè)axios的封裝就寫(xiě)完了
6、axios封裝好之后，調(diào)用就很簡(jiǎn)單了。我們把接口統(tǒng)一寫(xiě)在api.js文件里。（當(dāng)然，如果你的業(yè)務(wù)非常復(fù)雜的話，建議把不同業(yè)務(wù)的api分開(kāi)放到不同的文件里，這樣方便以后維護(hù)）。然后在具體的組件中進(jìn)行調(diào)用。
21、Vue.mixin() 可以將自定義的方法混入所有的 Vue 實(shí)例中。：https://segmentfault.com/a/11...
22、Vue keep-alive 實(shí)現(xiàn)后退緩存，前進(jìn)刷新:https://blog.csdn.net/xyj3602...
在router.js里添加一個(gè)標(biāo)識(shí)用于判斷頁(yè)面是否需要緩存.
23、vue的兩大核心：數(shù)據(jù)驅(qū)動(dòng)和組件
https://www.jianshu.com/p/293...
https://www.cnblogs.com/liuti...
24、路由傳遞參數(shù)：https://blog.csdn.net/crazywo...
25、vue全家桶：http://doc.liangxinghua.com/v...
26、hash和history兩種模式之間的區(qū)別：
https://www.cnblogs.com/JRliu...
27、vue-router怎樣實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)
https://blog.csdn.net/u014689...
https://www.cnblogs.com/wisew...
https://blog.csdn.net/sunshao...
28、vue $router和$route的區(qū)別
https://blog.csdn.net/wangguo...
29、vue中內(nèi)置的組件
Vue中內(nèi)置的組件有以下幾種：
1）component
2）transition
3）transition-group
4）keep-alive
5）slot1）component組件：有兩個(gè)屬性---is? ? inline-template
渲染一個(gè)‘元組件’為動(dòng)態(tài)組件，按照"is"特性的值來(lái)渲染成那個(gè)組件
2）transition組件：為組件的載入和切換提供動(dòng)畫(huà)效果，具有非常強(qiáng)的可定制性，支持16個(gè)屬性和12個(gè)事件
3）transition-group：作為多個(gè)元素/組件的過(guò)渡效果
4）keep-alive：包裹動(dòng)態(tài)組件時(shí)，會(huì)緩存不活動(dòng)的組件實(shí)例，而不是銷(xiāo)毀它們
5）slot：作為組件模板之中的內(nèi)容分發(fā)插槽，slot元素自身將被替換
30、Vue文本渲染三種方法 {{}}、v-html、v-text
{{ }}將元素當(dāng)成純文本輸出
v-html會(huì)將元素當(dāng)成HTML標(biāo)簽解析后輸出
v-text會(huì)將元素當(dāng)成純文本輸出
Vue文本渲染三種方法
{{hello}}
31、key
vue中列表循環(huán)需加:key="唯一標(biāo)識(shí)" 唯一標(biāo)識(shí)可以是item里面id index等，因?yàn)関ue組件高度復(fù)用
增加Key可以標(biāo)識(shí)組件的唯一性，為了更好地區(qū)別各個(gè)組件
key的作用主要是為了高效的更新虛擬DOMkey 的特殊屬性主要用在 Vue 的虛擬 DOM 算法，在新舊 nodes 對(duì)比時(shí)辨識(shí) VNodes。如果不使用 key，Vue 會(huì)使用一種最大限度減少動(dòng)態(tài)元素并且盡可能的嘗試修復(fù)/再利用相同類(lèi)型元素的算法。使用 key，它會(huì)基于 key 的變化重新排列元素順序，并且會(huì)移除 key 不存在的元素。
有相同父元素的子元素必須有獨(dú)特的 key。重復(fù)的 key 會(huì)造成渲染錯(cuò)誤。
最常見(jiàn)的用例是結(jié)合 v-for：
v-for為什么要加key: https://www.jianshu.com/p/4bd...
32、 頁(yè)面跳轉(zhuǎn)后，回到此頁(yè)面時(shí)，頁(yè)面不刷新
https://www.cnblogs.com/yiyib...
33、Vue項(xiàng)目使用AES做加密：https://www.cnblogs.com/libo0...
前端對(duì)稱加密--js對(duì)用戶名密碼進(jìn)行DES加密：https://blog.csdn.net/frankch...（使用的是這種方式）
34、vue中使用vue-quill-editor富文本編輯器，自定義toolbar修改工具欄options：https://blog.csdn.net/div_ma/...
35、按鈕級(jí)權(quán)限控制：https://www.jianshu.com/p/e50...
vue + vuex + directives實(shí)現(xiàn)權(quán)限按鈕的思路： https://www.jianshu.com/p/eea...
要求權(quán)限控制到按鈕級(jí)別,也就是說(shuō)對(duì)于不同的用戶,可操作的按鈕是不一樣的,換言之,有些按鈕對(duì)某些客戶是不可見(jiàn)的.例如:用戶A能看到"新增"按鈕,而用戶B看不到？1.定義一個(gè)全局方法,配合v-if實(shí)現(xiàn);在用戶登錄成功后,獲取用戶的按鈕權(quán)限(數(shù)組格式),存儲(chǔ)到store中，定義公共函數(shù)hasPermission，在main.js中引入,在需要的按鈕上使用即可
2、通過(guò)directives在全局main.js中注冊(cè)，自定義指令，頁(yè)面中按鈕只需加v-has即可。
1> meta字段里放入的是該用戶在此頁(yè)面能操作的按鈕權(quán)限的標(biāo)識(shí)permission，比如這個(gè)頁(yè)面有add、edit、delele權(quán)限，但是你只想讓這個(gè)用戶使用add，那么就"permission": ["add"]
{
"path": "/system",
"component": "Layout",
"redirect": "/system/userList",
"name": "系統(tǒng)管理",
"meta": {
"title": "系統(tǒng)管理",
"icon": "el-icon-setting"
},
"children": [{
"path": "userList",
"name": "用戶列表",
"component": "user/index",
"meta": {
"title": "用戶列表",
"icon": "el-icon-tickets",
"permission": ["add"] //按鈕權(quán)限
}
}
]
}
接著自定義指令btnPermission.js，在mian.js導(dǎo)入
import Vue from "vue"
/**權(quán)限指令**/
Vue.directive("has", {
inserted: function (el, binding, vnode) {
let permissionList = vnode.context.$route.meta.permission;
if (!permissionList || !permissionList.includes(binding.value.role)) {
el.parentNode.removeChild(el)
}
}
})
export { has }
使用：
添加
36、vue權(quán)限控制：https://www.jianshu.com/p/e5e...
vue實(shí)現(xiàn)菜單權(quán)限控制：https://www.cnblogs.com/ssh-0...
VUE 動(dòng)態(tài)菜單及視圖權(quán)限：https://www.jianshu.com/p/fca...
Vue 動(dòng)態(tài)路由的實(shí)現(xiàn)(后臺(tái)傳遞路由，前端拿到并生成側(cè)邊欄)：https://segmentfault.com/a/11...
Vue自定義指令實(shí)現(xiàn)按鈕級(jí)權(quán)限控制功能：https://www.cnblogs.com/leeke...
37、了解ESlint和其相關(guān)操作：https://www.jianshu.com/p/f75...
38、devtools調(diào)試工具
39、談?wù)勀銓?duì)vue的認(rèn)識(shí)：https://blog.csdn.net/keep789...
40、vue中的所有axios請(qǐng)求都會(huì)發(fā)送2次，但是第一次不返回?cái)?shù)據(jù)的原因
原因：跨域請(qǐng)求之前首先要發(fā)送options請(qǐng)求，詢問(wèn)服務(wù)器是否有權(quán)限訪問(wèn)，是否允許該請(qǐng)求類(lèi)型，如果允許則發(fā)起實(shí)際請(qǐng)求。
瀏覽器分為簡(jiǎn)單請(qǐng)求以及非簡(jiǎn)單請(qǐng)求：
解決方案：
跨域請(qǐng)求需要先發(fā)一次Option預(yù)請(qǐng)求，OPTIONS是檢驗(yàn)是否允許跨域的，如果不希望OPTIONS請(qǐng)求， 直接讓后端遇到option直接返回就可以了，前端可不做處理。
跨域資源共享 CORS 詳解：http://www.ruanyifeng.com/blo...
41、VUE的兩種跳轉(zhuǎn)push和replace對(duì)比區(qū)別
https://www.cnblogs.com/both-...this.$router.push()
跳轉(zhuǎn)到不同的url，但這個(gè)方法會(huì)向history棧添加一個(gè)記錄，點(diǎn)擊后退會(huì)返回到上一個(gè)頁(yè)面。
this.$router.replace()
同樣是跳轉(zhuǎn)到指定的url，但是這個(gè)方法不會(huì)向history里面添加新的記錄，點(diǎn)擊返回，會(huì)跳轉(zhuǎn)到上上一個(gè)頁(yè)面。上一個(gè)記錄是不存在的。
this.$router.go(n)
相對(duì)于當(dāng)前頁(yè)面向前或向后跳轉(zhuǎn)多少個(gè)頁(yè)面,類(lèi)似 window.history.go(n)。n可為正數(shù)可為負(fù)數(shù)。正數(shù)返回上一個(gè)頁(yè)面
42、computed和watch
computed用來(lái)監(jiān)控自己定義的變量，該變量不在data里面聲明，直接在computed里面定義，然后就可以在頁(yè)面上進(jìn)行雙向數(shù)據(jù)綁定展示出結(jié)果或者用作其他處理；
computed比較適合對(duì)多個(gè)變量或者對(duì)象進(jìn)行處理后返回一個(gè)結(jié)果值，也就是數(shù)多個(gè)變量中的某一個(gè)值發(fā)生了變化則我們監(jiān)控的這個(gè)值也就會(huì)發(fā)生變化，舉例：購(gòu)物車(chē)?yán)锩娴纳唐妨斜砗涂偨痤~之間的關(guān)系，只要商品列表里面的商品數(shù)量發(fā)生變化，或減少或增多或刪除商品，總金額都應(yīng)該發(fā)生變化。這里的這個(gè)總金額使用computed屬性來(lái)進(jìn)行計(jì)算是最好的選擇
watch主要用于監(jiān)控vue實(shí)例的變化，它監(jiān)控的變量當(dāng)然必須在data里面聲明才可以，它可以監(jiān)控一個(gè)變量，也可以是一個(gè)對(duì)象
watch一般用于監(jiān)控路由、input輸入框的值特殊處理等等，它比較適合的場(chǎng)景是一個(gè)數(shù)據(jù)影響多個(gè)數(shù)據(jù)
43、全局鉤子router.beforeEach作用于所有路由，里面的參數(shù)
to表示即將要進(jìn)入的路由對(duì)象，
from表示即將要離開(kāi)的路由對(duì)象，
next是繼續(xù)跳轉(zhuǎn)或中斷的方法。
router.beforeEach((to,from,next) => {
console.log(to)
console.log(from)
})
44、vue+axios 前端實(shí)現(xiàn)登錄攔截（路由攔截、http攔截）：https://www.cnblogs.com/guoxi...
首先在定義路由的時(shí)候就需要多添加一個(gè)自定義字段requireAuth（true or false），在需要登錄的路由的meta中添加響應(yīng)的權(quán)限標(biāo)識(shí)requireAuth，通過(guò)這個(gè)字段來(lái)判斷該路由是否需要登錄權(quán)限，再通過(guò)vuex state獲取當(dāng)前的token是否存在，需要的話，同時(shí)當(dāng)前應(yīng)用不存在token，則跳轉(zhuǎn)到登錄頁(yè)面，進(jìn)行登錄，登錄成功后跳轉(zhuǎn)到目標(biāo)路由。如果用戶已經(jīng)登錄，則順利進(jìn)入路由，否則就進(jìn)入登錄頁(yè)面。
//使用鉤子函數(shù)對(duì)路由進(jìn)行權(quán)限跳轉(zhuǎn)
router.beforeEach((to, from, next) => {
if (to.matched.some(r => r.meta.requireAuth)) {
if (store.getters.token) {
next();
} else {
next({
path: "/login",
query: {redirect: to.fullPath} // 將跳轉(zhuǎn)的路由path作為參數(shù)，登錄成功后跳轉(zhuǎn)到該路由
})
}
}else {
next();
}
});
45、動(dòng)態(tài)路由加載權(quán)限菜單
vue項(xiàng)目實(shí)現(xiàn)動(dòng)態(tài)路由的方式大體可分為兩種:
1.前端這邊把路由寫(xiě)好，登錄的時(shí)候根據(jù)用戶的角色權(quán)限來(lái)動(dòng)態(tài)展示路由(前端控制路由)
2.后臺(tái)傳來(lái)當(dāng)前用戶對(duì)應(yīng)權(quán)限的路由表，前端通過(guò)調(diào)接口拿到后處理(后端處理路由)
beforeEach路由攔截，進(jìn)入判斷，如果發(fā)現(xiàn)本地沒(méi)有路由數(shù)據(jù)，那就利用axios后臺(tái)取一次，取完以后，利用localStorage存儲(chǔ)起來(lái)，利用addRoutes動(dòng)態(tài)添加路由。
46、懶加載
component: resolve => require(["../page/my/my.vue"], resolve),//懶加載
懶加載的最終實(shí)現(xiàn)方案
1、路由頁(yè)面以及路由頁(yè)面中的組件全都使用懶加載
優(yōu)點(diǎn)：（1）最大化的實(shí)現(xiàn)隨用隨載
（2）團(tuán)隊(duì)開(kāi)發(fā)不會(huì)因?yàn)闇贤▎?wèn)題造成資源的重復(fù)浪費(fèi)
缺點(diǎn)：（1）當(dāng)一個(gè)頁(yè)面中嵌套多個(gè)組件時(shí)將發(fā)送多次的http請(qǐng)求，可能會(huì)造成網(wǎng)頁(yè)顯示過(guò)慢且渲染參差不齊的問(wèn)題2、路由頁(yè)面使用懶加載， 而路由頁(yè)面中的組件按需進(jìn)行懶加載, 即如果組件不大且使用不太頻繁, 直接在路由頁(yè)面中導(dǎo)入組件, 如果組件使用較為頻繁使用懶加載
優(yōu)點(diǎn)：（1）能夠減少頁(yè)面中的http請(qǐng)求，頁(yè)面顯示效果好
缺點(diǎn)：（2）需要團(tuán)隊(duì)事先交流， 在框架中分別建立懶加載組件與非懶加載組件文件夾3、路由頁(yè)面使用懶加載，在不特別影響首頁(yè)顯示延遲的情況下，根頁(yè)面合理導(dǎo)入復(fù)用組件，再結(jié)合方案2
優(yōu)點(diǎn)：（1）合理解決首頁(yè)延遲顯示問(wèn)題
?。?）能夠最大化的減少http請(qǐng)求， 且做其他他路由界面的顯示效果最佳
缺點(diǎn)：（1）還是需要團(tuán)隊(duì)交流，建立合理區(qū)分各種加載方式的組件文件夾
47、router-link 與 router-view：https://www.cnblogs.com/dongz...
在菜單欄使用router-link配置菜單連接地址，使用router-view 顯示連接地址的詳細(xì)內(nèi)容是用來(lái)渲染通過(guò)路由映射過(guò)來(lái)的組件，當(dāng)路徑更改時(shí)， 中的內(nèi)容也會(huì)發(fā)生更改
48、easy-mock: https://segmentfault.com/a/11...
https://www.easy-mock.com/docs
49、Vue中v-if和v-show的使用場(chǎng)景：https://blog.csdn.net/grapelo...
50、v-show和v-if指令的共同點(diǎn)和不同點(diǎn)：
共同點(diǎn)：
v-if和v-show都是通過(guò)判斷綁定數(shù)據(jù)的truefalse來(lái)展示不同點(diǎn)：
v-if只有在判斷為true的時(shí)候才會(huì)對(duì)數(shù)據(jù)進(jìn)行渲染，false的時(shí)候把包含的代碼進(jìn)行刪除。除非再次進(jìn)行數(shù)據(jù)渲染，v-if才會(huì)重新判斷?？梢哉f(shuō)是用法比較傾向于對(duì)數(shù)據(jù)一次操作。
v-show是無(wú)論判斷是什么都會(huì)先對(duì)數(shù)據(jù)進(jìn)行渲染，只是false的時(shí)候?qū)?jié)點(diǎn)進(jìn)行display:none;的操作。所以再不重新渲染數(shù)據(jù)的情況下，改變數(shù)據(jù)的值可以使數(shù)據(jù)展示或隱藏。
vue-show本質(zhì)就是標(biāo)簽display設(shè)置為none，控制隱藏
vue-if是動(dòng)態(tài)的向DOM樹(shù)內(nèi)添加或者刪除DOM元素
51、如何讓CSS只在當(dāng)前組件中起作用:
將當(dāng)前組件的