Vue.js?前端路由和異步組件介紹
文章目標(biāo)
P6
- 針對(duì)
react/vue
能夠根據(jù)業(yè)務(wù)需求口噴router
的關(guān)鍵配置,包括但不限于:路由的匹配規(guī)則、路由守衛(wèi)、路由分層等; - 能夠描述清楚
history
的主要模式,知道history
和router
的邊界;
P6+ ~ P7
- 在沒有路由的情況下,也可以根據(jù)也無需求,實(shí)現(xiàn)一個(gè)簡(jiǎn)單的路由;
- 讀過
router
底層的源碼,不要求每行都讀,可以口噴關(guān)鍵代碼即可;
一、背景
遠(yuǎn)古時(shí)期,當(dāng)時(shí)前后端還是不分離的,路由全部都是由服務(wù)端控制的,前端代碼和服務(wù)端代碼過度融合在一起。
客戶端 -->
前端發(fā)起 http
請(qǐng)求 -->
服務(wù)端 -->
url
路徑去匹配不同的路由 -->
返回不同的數(shù)據(jù)。
這種方式的缺點(diǎn)和優(yōu)點(diǎn)都非常明顯:
- 優(yōu)點(diǎn):因?yàn)橹苯臃祷匾粋€(gè)
html
,渲染了頁面結(jié)構(gòu)。SEO
的效果非常好,首屏?xí)r間特別快;- 在瀏覽器輸入一個(gè)
url
開始到頁面任意元素加載出來/渲染出來-->
首屏?xí)r間;
- 在瀏覽器輸入一個(gè)
- 缺點(diǎn):前端代碼和服務(wù)端代碼過度融合在一起,開發(fā)協(xié)同非常的亂。服務(wù)器壓力大,因?yàn)榘褬?gòu)建
html
的工作放在的服務(wù)端;
后來 ...隨之 ajax
的流行,異步數(shù)據(jù)請(qǐng)求可以在瀏覽器不刷新的情況下進(jìn)行。
后來 ...出現(xiàn)了更高級(jí)的體驗(yàn) —— 單頁應(yīng)用。
- 頁
-->
HTML
文件 - 單頁
-->
單個(gè)HTML
文件
在單頁應(yīng)用中,不僅在頁面中的交互是不刷新頁面的,就連頁面跳轉(zhuǎn)也都是不刷新頁面的。
單頁應(yīng)用的特點(diǎn):
- 頁面中的交互是不刷新的頁面的,比如點(diǎn)擊按鈕,比如點(diǎn)擊出現(xiàn)一個(gè)彈窗;
- 多個(gè)頁面間的交互,不需要刷新頁面(
a/b/c
,a-> b -> c
);加載過的公共資源,無需再重復(fù)加載;
而支持起單頁應(yīng)用這種特性的,就是 前端路由。
二、前端路由特性
前端路由的需求是什么?
- 根據(jù)不同的
url
渲染不同內(nèi)容; - 不刷新頁面;
也就是可以在改變 url
的前提下,保證頁面不刷新。
三、面試?。?!
Hash
路由和 History
路由的區(qū)別?
hash
有#
,history
沒有#
;hash
的#
部分內(nèi)容不會(huì)給服務(wù)端,主要一般是用于錨點(diǎn),history
的所有內(nèi)容都會(huì)給服務(wù)端;hash
路由是不支持SSR
的,history
路由是可以的;hash
通過hashchange
監(jiān)聽變化,history
通過popstate
監(jiān)聽變化;
四、Hash 原理及實(shí)現(xiàn)
1、特性
hash
的出現(xiàn)滿足了這個(gè)需求,他有以下幾種特征:
url
中帶有一個(gè)#
符號(hào),但是#
只是瀏覽器端/客戶端的狀態(tài),不會(huì)傳遞給服務(wù)端;- 客戶端路由地址
www.baidu.com/#/user
-->
通過http
請(qǐng)求-->
服務(wù)端接收到的www.baidu.com/
- 客戶端路由地址
www.baidu.com/#/list/detail/1
-->
通過http
請(qǐng)求-->
服務(wù)端接收到的www.baidu.com/
- 客戶端路由地址
hash
值的更改,不會(huì)導(dǎo)致頁面的刷新;
location.hash = '#aaa'; location.hash = '#bbb'; // 從 #aaa 到 #bbb,頁面是不會(huì)刷新的
- 不同
url
會(huì)渲染不同的頁面; hash
值的更改,會(huì)在瀏覽器的訪問歷史中添加一條記錄,所以我們才可以通過瀏覽器的返回、前進(jìn)按鈕來控制hash
的切換;hash
值的更改,會(huì)觸發(fā)hashchange
事件;
location.hash = '#aaa'; location.hash = '#bbb'; window.addEventLisenter('hashchange', () => {});
2、如何更改 hash
我們同樣有兩種方式來控制 hash
的變化:
location.hash
的方式:
location.hash = '#aaa'; location.hash = '#bbb';
html
標(biāo)簽的方式:
<a href="#user" rel="external nofollow" > 點(diǎn)擊跳轉(zhuǎn)到 user </a> <!-- 等同于下面的寫法 --> location.hash = '#user';
3、手動(dòng)實(shí)現(xiàn)一個(gè)基于 hash 的路由
./index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="./index.css" rel="external nofollow" /> </head> <body> <div class="container"> <a href="#gray" rel="external nofollow" >灰色</a> <a href="#green" rel="external nofollow" >綠色</a> <a href="#" rel="external nofollow" >白色</a> <button onclick="window.history.go(-1)">返回</button> </div> <script type="text/javascript" src="index.js"></script> </body> </html>
./index.css
.container { width: 100%; height: 60px; display: flex; justify-content: space-around; align-items: center; font-size: 18px; font-weight: bold; background: black; color: white; } a:link, a:hover, a:active, a:visited { text-decoration: none; color: white; }
./index.js
/* 期望看到的效果:點(diǎn)擊三個(gè)不同的 a 標(biāo)簽,頁面的背景顏色會(huì)隨之變化 */ class BaseRouter { constructor() { this.routes = {}; // 存儲(chǔ) path 以及 callback 的對(duì)應(yīng)關(guān)系 this.refresh = this.refresh.bind(this); // 如果不 bind 的話,refresh 方法中的 this 指向 window // 處理頁面 hash 變化,可能存在問題:頁面首次進(jìn)來可能是 index.html,并不會(huì)觸發(fā) hashchange 方法 window.addEventListener('hashchange', this.refresh); // 處理頁面首次加載 window.addEventListener('load', this.refresh); } /** * route * @param {*} path 路由路徑 * @param {*} callback 回調(diào)函數(shù) */ route(path, callback) { console.log('========= route 方法 ========== ', path); // 向 this.routes 存儲(chǔ) path 以及 callback 的對(duì)應(yīng)關(guān)系 this.routes[path] = callback || function () {}; } refresh() { // 刷新頁面 const path = `/${location.hash.slice(1) || ''}`; console.log('========= refresh 方法 ========== ', path); this.routes[path](); } } const body = document.querySelector('body'); function changeBgColor(color) { body.style.backgroundColor = color; } const Router = new BaseRouter(); Router.route('/', () => changeBgColor('white')); Router.route('/green', () => changeBgColor('green')); Router.route('/gray', () => changeBgColor('gray'));
五、History 原理及實(shí)現(xiàn)
hash
有個(gè) #
符號(hào),不美觀,服務(wù)端無法接受到 hash
路徑和參數(shù)。
歷史的車輪無情攆過 hash
,到了 HTML5
時(shí)代,推出了 History API
。
1、HTML5 History 常用的 API
window.history.back(); // 后退 window.history.forward(); // 前進(jìn) window.history.go(-3); // 接收 number 參數(shù),后退 N 個(gè)頁面 window.history.pushState(null, null, path); window.history.replaceState(null, null, path);
其中最主要的兩個(gè) API
是 pushState
和 replaceState
,這兩個(gè) API
都可以在不刷新頁面的情況下,操作瀏覽器歷史記錄。
不同的是,pushState
會(huì)增加歷史記錄,replaceState
會(huì)直接替換當(dāng)前歷史記錄。
2、pushState/replaceState 的參數(shù)
pushState
:頁面的瀏覽記錄里添加一個(gè)歷史記錄;replaceState
:替換當(dāng)前歷史記錄;
他們的參數(shù)是?樣的,三個(gè)參數(shù)分別是:
state
:是一個(gè)對(duì)象,是一個(gè)與指定網(wǎng)址相關(guān)的對(duì)象,當(dāng)popstate
事件觸發(fā)的時(shí)候,該對(duì)象會(huì)傳入回調(diào)函數(shù);title
:新頁面的標(biāo)題,瀏覽器支持不一,建議直接使用null
;url
:頁面的新地址;
3、History 的特性
History API
有以下幾個(gè)特性:
- 沒有
#
; history.pushState()
或history.replaceState()
不會(huì)觸發(fā)popstate
事件,這時(shí)我們需要手動(dòng)觸發(fā)頁面渲染;- 可以使用
history.popstate
事件來監(jiān)聽url
的變化; - 只有用戶點(diǎn)擊瀏覽器 倒退按鈕 和 前進(jìn)按鈕,或者使用
JavaScript
調(diào)用back
、forward
、go
方法時(shí)才會(huì)觸發(fā)popstate
;
4、面試?。?!
pushState
時(shí),會(huì)觸發(fā)popstate
嗎?pushState/replaceState
并不會(huì)觸發(fā)popstate
事件,這時(shí)我們需要手動(dòng)觸發(fā)頁面的重新渲染;
我們可以使用
popstate
來監(jiān)聽url
的變化;popstate
到底什么時(shí)候才能觸發(fā):- 點(diǎn)擊瀏覽器后退按鈕;
- 點(diǎn)擊瀏覽器前進(jìn)按鈕;
js
調(diào)用back
方法;js
調(diào)用forward
方法;js
調(diào)用go
方法;
5、手動(dòng)實(shí)現(xiàn)一個(gè)基于 History 的路由
./index.html
./index.css
.container { width: 100%; height: 60px; display: flex; justify-content: space-around; align-items: center; font-size: 18px; font-weight: bold; background: black; color: white; } a:link, a:hover, a:active, a:visited { text-decoration: none; color: white; }
./index.js
class BaseRouter { constructor() { this.routes = {}; // location.href; => hash 的方式 console.log('location.pathname ======== ', location.pathname); // http://127.0.0.1:8080/green ==> /green this.init(location.pathname); this._bindPopState(); } init(path) { // pushState/replaceState 不會(huì)觸發(fā)頁面的渲染,需要我們手動(dòng)觸發(fā) window.history.replaceState({ path }, null, path); const cb = this.routes[path]; if (cb) { cb(); } } route(path, callback) { this.routes[path] = callback || function () {}; } // ! 跳轉(zhuǎn)并執(zhí)行對(duì)應(yīng)的 callback go(path) { // pushState/replaceState 不會(huì)觸發(fā)頁面的渲染,需要我們手動(dòng)觸發(fā) window.history.pushState({ path }, null, path); const cb = this.routes[path]; if (cb) { cb(); } } // ! 演示一下 popstate 事件觸發(fā)后,會(huì)發(fā)生什么 _bindPopState() { window.addEventListener('popstate', e => { /* 觸發(fā)條件: 1、點(diǎn)擊瀏覽器前進(jìn)按鈕 2、點(diǎn)擊瀏覽器后退按鈕 3、js 調(diào)用 forward 方法 4、js 調(diào)用 back 方法 5、js 調(diào)用 go 方法 */ console.log('popstate 觸發(fā)了'); const path = e.state && e.state.path; console.log('path >>> ', path); this.routes[path] && this.routes[path](); }); } } const Router = new BaseRouter(); const body = document.querySelector('body'); const container = document.querySelector('.container'); function changeBgColor(color) { body.style.backgroundColor = color; } Router.route('/', () => changeBgColor('white')); Router.route('/gray', () => changeBgColor('gray')); Router.route('/green', () => changeBgColor('green')); container.addEventListener('click', e => { if (e.target.tagName === 'A') { e.preventDefault(); console.log(e.target.getAttribute('href')); // /gray /green 等等 Router.go(e.target.getAttribute('href')); } });
六、Vue-Router
1、router 使用
使用 Vue.js
,我們已經(jīng)可以通過組合組件來組成應(yīng)用程序,當(dāng)你要把 Vue Router
添加進(jìn)來,我們需要做的是,將組件(components
)映射到路由(routes
),然后告訴 Vue Router
在哪里渲染它們。
舉個(gè)例子:
<!-- 路由匹配到的組件將渲染在這里 --> <div id="app"> <router-view></router-view> </div>
// 如果使用模塊化機(jī)制編程,導(dǎo)入 Vue 和 VueRouter,要調(diào)用 Vue.use(VueRouter) // 1、定義(路由)組件 // 可以從其他文件 import 進(jìn)來 const Foo = { template: '<div>foo</div>' }; const Bar = { template: '<div>bar</div>' }; // 2、定義路由 //每個(gè)路由應(yīng)該映射一個(gè)組件,其中 component 可以是通過 Vue.extend() 創(chuàng)建的組件構(gòu)造器,或者只是一個(gè)組件配置對(duì)象 const routes = [ { path: '/foo', component: Foo }, { path: '/bar', component: Bar }, ]; // 3、創(chuàng)建 router 實(shí)例,然后傳 routes 配置 const router = new VueRouter({ routes, }); // 4、創(chuàng)建和掛載根實(shí)例 // 記得要通過 router 配置參數(shù)注入路由,從而讓整個(gè)應(yīng)用都有路由功能 const app = new Vue({ router, }).$mount('#app');
2、動(dòng)態(tài)路由匹配
我們經(jīng)常需要把某種模式匹配到的所有路由,全部映射到同個(gè)組件,比如用戶信息組件,不同用戶使用同一個(gè)組件。
可以通過 $route.params.id
或者參數(shù)。
const router = new VueRouter({ routes: [ // 動(dòng)態(tài)路徑參數(shù),以冒號(hào)開頭 { path: '/user/:id', component: User }, ], }); const User = { template: '<div>User: {{ $route.params.id }}</div>', };
3、響應(yīng)路由參數(shù)的變化
復(fù)用組件時(shí),想對(duì) 路由參數(shù) 的變化作出響應(yīng)的話,可以使用 watch
或者 beforeRouteUpdate
:
舉個(gè)例子:
const User = { template: '...', watch: { $route(to, from) { // 對(duì)路由變化作出響應(yīng)... }, }, }; const User = { template: '...', beforeRouteUpdate(to, from, next) { // 對(duì)路由變化作出響應(yīng)... // don't forget to call next() }, };
4、捕獲所有路由或 404 Not found 路由
當(dāng)時(shí)用通配符路由時(shí),請(qǐng)確保路由的順序是正確的,也就是說含有通配符的路由應(yīng)該在 最后。
舉個(gè)例子:
5、導(dǎo)航守衛(wèi)
vue-router
提供的導(dǎo)航守衛(wèi)主要用來通過跳轉(zhuǎn)或取消的方式守衛(wèi)導(dǎo)航。有多種方式植入路由導(dǎo)航過程中:
- 全局的
- 全局前置守衛(wèi):
router.beforeEach
- 全局解析守衛(wèi):
router.beforeResolve
- 全局后置鉤子:
router.afterEach
- 全局前置守衛(wèi):
- 單個(gè)路由獨(dú)享的
- 路由獨(dú)享守衛(wèi):
beforeEnter
- 路由獨(dú)享守衛(wèi):
- 組件級(jí)的
beforeRouteEnter
beforeRouteUpdate
beforeRouteLeave
6、完整的導(dǎo)航解析流程
- 導(dǎo)航被觸發(fā);
- 在失活的組件里調(diào)用離開守衛(wèi)(前一個(gè)組件的
beforeRouteLeave
); - 調(diào)用全局的
beforeEach
守衛(wèi); - 在重用的組件里調(diào)用
beforeRouteUpdate
守衛(wèi); - 在路由配置里調(diào)用
beforeEnter
; - 解析異步路由組件;
- 在被激活的組件里調(diào)用
beforeRouterEnter
; - 調(diào)用全局的
beforeResolve
守衛(wèi); - 導(dǎo)航被確認(rèn);
- 調(diào)用全局的
afterEach
鉤子; - 觸發(fā)
DOM
更新; - 用創(chuàng)建好的實(shí)例調(diào)用
beforeRouterEnter
守衛(wèi)中傳給next
的回調(diào)函數(shù);
舉個(gè)例子:
// 全局 const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes, }); // 全局的導(dǎo)航守衛(wèi) router.beforeEach((to, from, next) => { console.log(`Router.beforeEach => from=${from.path}, to=${to.path}`); // 可以設(shè)置頁面的 title document.title = to.meta.title || '默認(rèn)標(biāo)題'; // 執(zhí)行下一個(gè)路由導(dǎo)航 next(); }); router.afterEach((to, from) => { console.log(`Router.afterEach => from=${from.path}, to=${to.path}`); }); // 路由獨(dú)享 const router = new VueRouter({ routes: [ { path: '/foo', component: Foo, beforeEnter: (to, from, next) => { // 配置數(shù)組里針對(duì)單個(gè)路由的導(dǎo)航守衛(wèi) console.log(`TestComponent route config beforeEnter => from=${from.path}, to=${to.path}`); next(); }, }, ], }); // 組件 const Foo = { template: `...`, beforeRouteEnter(to, from, next) { // 在渲染該組件的對(duì)應(yīng)路由被 comfirm 前調(diào)用 // 不!能!獲取組件實(shí)例 this,因?yàn)楫?dāng)守衛(wèi)執(zhí)行前,組件實(shí)例還沒被調(diào)用 }, beforeRouteUpdate(to, from, next) { // 在當(dāng)前路由改變,但是該組件被復(fù)用時(shí)調(diào)用 // 舉個(gè)例子來說,對(duì)于一個(gè)帶有動(dòng)態(tài)參數(shù)的路徑 /foo/:id,在 /foo/1 和 /foo/2 之間跳轉(zhuǎn)的時(shí)候 // 由于會(huì)渲染同樣的 Foo 組件,因此組件實(shí)例會(huì)被復(fù)用。而這個(gè)鉤子就會(huì)在這個(gè)情況下被調(diào)用 // 可以訪問組件實(shí)例 this }, beforeRouteLeave(to, from, next) { // 導(dǎo)航離開該組件的對(duì)應(yīng)路由時(shí)調(diào)用 // 可以訪問組件實(shí)例 this }, };
next
必須調(diào)用:
next()
:進(jìn)行管道中的下一個(gè)鉤子。如果全部鉤子執(zhí)行完了,則導(dǎo)航的狀態(tài)就是confirmed
(確認(rèn)的)。next(false)
:中斷當(dāng)前的導(dǎo)航。如果瀏覽器的URL
改變了(可能是用戶手動(dòng)或者瀏覽器后退按鈕),那么URL
地址會(huì)重置到from
路由對(duì)應(yīng)的地址。next("/")
或者next({ path: "/" })
:跳轉(zhuǎn)到一個(gè)不同的地址。當(dāng)前的導(dǎo)航被中斷,然后進(jìn)行一個(gè)新的導(dǎo)航??梢韵?nbsp;next
傳遞任意位置對(duì)象,且允許設(shè)置諸如replace: true
、name: "home"
之類的選項(xiàng)以及任何用在router-link
的to prop
或router.push
中的選項(xiàng)。next(error)
:如果傳入next
的參數(shù)是一個(gè)Error
實(shí)例,則導(dǎo)航會(huì)被終止且該錯(cuò)誤會(huì)被傳遞給router.onError()
注冊(cè)過的回調(diào)。
7、導(dǎo)航守衛(wèi)執(zhí)行順序(面試?。。。?/h3>
- 【組件】前一個(gè)組件的
beforeRouteLeave
- 【全局】的
router.beforeEach
- 【組件】如果是路由參數(shù)變化,觸發(fā)
beforeRouteUpdate
- 【配置文件】里,下一個(gè)的
beforeEnter
- 【組件】?jī)?nèi)部聲明的
beforeRouteEnter
- 【全局】的
router.afterEach
beforeRouteLeave
router.beforeEach
- 【組件】如果是路由參數(shù)變化,觸發(fā)
beforeRouteUpdate
beforeEnter
beforeRouteEnter
router.afterEach
8、滾動(dòng)行為(面試!?。。?/h3>
vue-router
里面,怎么記住前一個(gè)頁面的滾動(dòng)條的位置???
使用前端路由,當(dāng)切換到新路由時(shí),想要頁面滾動(dòng)到頂部,或者是保持原先的滾動(dòng)位置,就像重新加載頁面那樣。
Vue-router
能做到,而且更好,它讓你可以自定義路由切換時(shí)頁面如何滾動(dòng)。
【注意】:這個(gè)功能只在支持 history.pushState
的瀏覽器中可用。
scrollBehavior
生效的條件:
- 瀏覽器支持
history API
; - 頁面間的交互是通過
go
,forward
,back
或者 瀏覽器的前進(jìn)/返回按鈕;
window.history.back(); // 后退 window.history.forward(); // 前進(jìn) window.history.go(-3); // 接收 number 參數(shù),后退 N 個(gè)頁面
舉個(gè)例子:
// 1. 記?。菏謩?dòng)點(diǎn)擊瀏覽器返回或者前進(jìn)按鈕,記住滾動(dòng)條的位置,基于 history API 的,其中包括:go、back、forward、手動(dòng)點(diǎn)擊瀏覽器返回或者前進(jìn)按鈕 // 2. 沒記?。簉outer-link,并沒有記住滾動(dòng)條的位置 const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes, scrollBehavior: (to, from, savedPosition) => { console.log(savedPosition); // 已保存的位置信息 return savedPosition; }, });
9、路由懶加載
當(dāng)打包構(gòu)建應(yīng)用時(shí),JavaScript
包會(huì)變得非常大,影響頁面加載。如果我們能把不同路由對(duì)應(yīng)的組件分割成不同的代碼塊,然后當(dāng)路由被訪問的時(shí)候才加載對(duì)應(yīng)組件,這樣就更加高效了。
舉個(gè)例子:
const Foo = () => import(/* webpackChunkName: "foo" */ './Foo.vue'); const router = new VueRouter({ routes: [{ path: '/foo', component: Foo }], });
到此這篇關(guān)于Vue.js 前端路由和異步組件介紹的文章就介紹到這了,更多相關(guān)Vue.js 異步組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue前端和Django后端如何查詢一定時(shí)間段內(nèi)的數(shù)據(jù)
這篇文章主要給大家介紹了關(guān)于vue前端和Django后端如何查詢一定時(shí)間段內(nèi)的數(shù)據(jù)的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02單頁面vue引入百度統(tǒng)計(jì)的使用方法示例詳解
在網(wǎng)上各種找不到vue項(xiàng)目加入百度統(tǒng)計(jì)的代碼與實(shí)現(xiàn),自己探索出了一套加入百度統(tǒng)計(jì)的辦法,下面這篇文章主要給大家介紹了關(guān)于單頁面vue引入百度統(tǒng)計(jì)的使用方法,需要的朋友可以參考下2018-10-10vue實(shí)現(xiàn)輸入框的模糊查詢的示例代碼(節(jié)流函數(shù)的應(yīng)用場(chǎng)景)
這篇文章主要介紹了vue實(shí)現(xiàn)輸入框的模糊查詢的示例代碼(節(jié)流函數(shù)的應(yīng)用場(chǎng)景),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09Vue.js 應(yīng)用性能優(yōu)化分析+解決方案
這篇文章主要介紹了Vue.js 應(yīng)用性能優(yōu)化分析以及解決方案,VueJS 是開發(fā)網(wǎng)站最受歡迎、最穩(wěn)定的 JavaScript 框架,但與其他框架一樣,如果您忽略它,性能就會(huì)受到影響,下面我們就一起來看看怎么才能讓性能提升吧2021-12-12antd upload上傳組件如何獲取服務(wù)端返回?cái)?shù)據(jù)
這篇文章主要介紹了antd upload上傳組件如何獲取服務(wù)端返回?cái)?shù)據(jù)問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-02-02Vue使用Proxy監(jiān)聽所有接口狀態(tài)的方法實(shí)現(xiàn)
這篇文章主要介紹了Vue使用Proxy監(jiān)聽所有接口狀態(tài)的方法實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06vue+element?ui表格添加多個(gè)搜索條件篩選功能(前端查詢)
這篇文章主要給大家介紹了關(guān)于vue+element?ui表格添加多個(gè)搜索條件篩選功能的相關(guān)資料,最近在使用element-ui的表格組件時(shí),遇到了搜索框功能的實(shí)現(xiàn)問題,需要的朋友可以參考下2023-08-08Springboot+Vue-Cropper實(shí)現(xiàn)頭像剪切上傳效果
這篇文章主要為大家詳細(xì)介紹了Springboot+Vue-Cropper實(shí)現(xiàn)頭像剪切上傳效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-08-08vue.js使用v-model實(shí)現(xiàn)父子組件間的雙向通信示例
這篇文章主要介紹了vue.js使用v-model實(shí)現(xiàn)父子組件間的雙向通信,結(jié)合實(shí)例形式分析了vue.js基于v-model父子組件間的雙向通信的具體實(shí)現(xiàn)技巧,需要的朋友可以參考下2020-02-02