一区二区三区日韩精品-日韩经典一区二区三区-五月激情综合丁香婷婷-欧美精品中文字幕专区

分享

Vue.js—vue-router 60分鐘快速入門(mén)

 ZhouAndrew 2022-02-10

?

https://www./post/view/id/113327# 

       vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,適合用于構(gòu)建單頁(yè)面應(yīng)用。vue的單頁(yè)面應(yīng)用是基于路由和組件的,路由用于設(shè)定訪問(wèn)路徑,并將路徑和組件映射起來(lái)。傳統(tǒng)的頁(yè)面應(yīng)用,是用一些超鏈接來(lái)實(shí)現(xiàn)頁(yè)面切換和跳轉(zhuǎn)的。在vue-router單頁(yè)面應(yīng)用中,則是路徑之間的切換,也就是組件的切換。

本文將以示例的形式來(lái)介紹vue-router的各個(gè)特性,一共包含6個(gè)示例,每個(gè)示例都有乞丐版,前5個(gè)示例有皇帝版。
乞丐版是將所有代碼混雜在一起的HTML頁(yè)面,皇帝版是基于vue-webpack-simple模板構(gòu)建的。

乞丐版可以讓你快速地了解到vue-router的一些特性和API;皇帝版則基于.vue組件和單獨(dú)的路由配置,更適用于實(shí)際的應(yīng)用。

本文的Demo和源代碼已放到GitHub,如果您覺(jué)得內(nèi)容不錯(cuò),請(qǐng)點(diǎn)個(gè)贊,或在GitHub上加個(gè)星星!

第一個(gè)單頁(yè)面應(yīng)用 嵌套路由示例 具名路徑示例 路由對(duì)象示例 讓鏈接處于選中狀態(tài)示例 鉤子函數(shù)示例 GitHub Source

在GitHub上,乞丐版和皇帝版的目錄結(jié)構(gòu)如下:

  1. ├─06.Router // vue-router示例目錄
  2. │ ├─basic // 乞丐版示例
  3. │ ├──basic_01.html // 第一個(gè)單頁(yè)面應(yīng)用
  4. │ ├──basic_02.html // 嵌套路由示例
  5. │ ├──basic_03.html // 具名路徑示例
  6. │ ├──basic_04.html // 路由對(duì)象實(shí)例
  7. │ ├──basic_05.html // 讓鏈接處于選中狀態(tài)示例
  8. │ ├──basic_06.html // 鉤子函數(shù)示例
  9. │ ├─demo01 // 皇帝版,和basic_01.html對(duì)應(yīng)
  10. │ ├─demo02 // 皇帝版,和basic_02.html對(duì)應(yīng)
  11. │ ├─demo03 // 皇帝版,和basic_03.html對(duì)應(yīng)
  12. │ ├─demo04 // 皇帝版,和basic_04.html對(duì)應(yīng)
  13. │ ├─demo05 // 皇帝版,和basic_05.html對(duì)應(yīng)

第一個(gè)單頁(yè)面應(yīng)用(01)

現(xiàn)在我們以一個(gè)簡(jiǎn)單的單頁(yè)面應(yīng)用開(kāi)啟vue-router之旅,這個(gè)單頁(yè)面應(yīng)用有兩個(gè)路徑:/home/about,與這兩個(gè)路徑對(duì)應(yīng)的是兩個(gè)組件Home和About。

image

1. 創(chuàng)建組件

首先引入vue.js和vue-router.js:

  1. <script src="js/vue.js"></script> <script src="js/vue-router.js"></script>

然后創(chuàng)建兩個(gè)組件構(gòu)造器Home和About:

  1. var Home = Vue.extend({
  2. template: '<div><h1>Home</h1><p>{{msg}}</p></div>',
  3. data: function() { return {
  4. msg: 'Hello, vue router!'
  5. }
  6. }
  7. }) var About = Vue.extend({
  8. template: '<div><h1>About</h1><p>This is the tutorial about vue-router.</p></div>'
  9. })

2. 創(chuàng)建Router

  1. var router = new VueRouter()

調(diào)用構(gòu)造器VueRouter,創(chuàng)建一個(gè)路由器實(shí)例router。

3. 映射路由

  1. router.map({ '/home': { component: Home }, '/about': { component: About }
  2. })

調(diào)用router的map方法映射路由,每條路由以key-value的形式存在,key是路徑,value是組件。
例如:'/home'是一條路由的key,它表示路徑;{component: Home}則表示該條路由映射的組件。

4. 使用v-link指令

  1. <div class="list-group"> <a class="list-group-item" v-link="{ path: '/home'}">Home</a> <a class="list-group-item" v-link="{ path: '/about'}">About</a> </div>

在a元素上使用v-link指令跳轉(zhuǎn)到指定路徑。

5. 使用<router-view>標(biāo)簽

  1. <router-view></router-view>

在頁(yè)面上使用<router-view></router-view>標(biāo)簽,它用于渲染匹配的組件。

6. 啟動(dòng)路由

  1. var App = Vue.extend({})
  2. router.start(App, '#app')

路由器的運(yùn)行需要一個(gè)根組件,router.start(App, '#app') 表示router會(huì)創(chuàng)建一個(gè)App實(shí)例,并且掛載到#app元素。
注意:使用vue-router的應(yīng)用,不需要顯式地創(chuàng)建Vue實(shí)例,而是調(diào)用start方法將根組件掛載到某個(gè)元素。

36

View Demo

當(dāng)你從GitHub上獲取到最新的源代碼后,如果想運(yùn)行皇帝版,以demo01為例,在Git Bash下執(zhí)行以下命令:

  1. npm run demo01-dev

image

然后在瀏覽器中訪問(wèn)地址http://127.0.0.1:8080

如果要編譯和發(fā)布,請(qǐng)?jiān)贕it Bash下執(zhí)行以下命令:

  1. npm run demo01-build

編寫(xiě)單頁(yè)面的步驟

上面的6個(gè)步驟,可以說(shuō)是創(chuàng)建一個(gè)單頁(yè)面應(yīng)用的基本步驟:

image

JavaScript

  1. 創(chuàng)建組件:創(chuàng)建單頁(yè)面應(yīng)用需要渲染的組件
  2. 創(chuàng)建路由:創(chuàng)建VueRouter實(shí)例
  3. 映射路由:調(diào)用VueRouter實(shí)例的map方法
  4. 啟動(dòng)路由:調(diào)用VueRouter實(shí)例的start方法

HTML

  1. 使用v-link指令
  2. 使用<router-view>標(biāo)簽

router.redirect

應(yīng)用在首次運(yùn)行時(shí)右側(cè)是一片空白,應(yīng)用通常都會(huì)有一個(gè)首頁(yè),例如:Home頁(yè)。
使用router.redirect方法將根路徑重定向到/home路徑:

  1. router.redirect({ '/': '/home'
  2. })

router.redirect方法用于為路由器定義全局的重定向規(guī)則,全局的重定向會(huì)在匹配當(dāng)前路徑之前執(zhí)行。

執(zhí)行過(guò)程

當(dāng)用戶點(diǎn)擊v-link指令元素時(shí),我們可以大致猜想一下這中間發(fā)生了什么事情:

  • vue-router首先會(huì)去查找v-link指令的路由映射
  • 然后根據(jù)路由映射找到匹配的組件
  • 最后將組件渲染到<router-view>標(biāo)簽

image

嵌套路由(02)

嵌套路由是個(gè)常見(jiàn)的需求,假設(shè)用戶能夠通過(guò)路徑/home/news/home/message訪問(wèn)一些內(nèi)容,一個(gè)路徑映射一個(gè)組件,訪問(wèn)這兩個(gè)路徑也會(huì)分別渲染兩個(gè)組件。

image

實(shí)現(xiàn)嵌套路由有兩個(gè)要點(diǎn):

  • 在組件內(nèi)部使用<router-view>標(biāo)簽
  • 在路由器對(duì)象中給組件定義子路由

現(xiàn)在我們就動(dòng)手實(shí)現(xiàn)這個(gè)需求。

組件模板:

  1. <template id="home"> <div> <h1>Home</h1> <p>{{msg}}</p> </div> <div> <ul class="nav nav-tabs"> <li> <a v-link="{ path: '/home/news'}">News</a> </li> <li> <a v-link="{ path: '/home/message'}">Messages</a> </li> </ul> <router-view></router-view> </div> </template> <template id="news"> <ul> <li>News 01</li> <li>News 02</li> <li>News 03</li> </ul> </template> <template id="message"> <ul> <li>Message 01</li> <li>Message 02</li> <li>Message 03</li> </ul> </template>

組件構(gòu)造器:

  1. var Home = Vue.extend({
  2. template: '#home',
  3. data: function() { return {
  4. msg: 'Hello, vue router!'
  5. }
  6. }
  7. }) var News = Vue.extend({
  8. template: '#news'
  9. }) var Message = Vue.extend({
  10. template: '#message'
  11. })

路由映射:

  1. router.map({ '/home': {
  2. component: Home, // 定義子路由
  3. subRoutes: { '/news': {
  4. component: News
  5. }, '/message': {
  6. component: Message
  7. }
  8. }
  9. }, '/about': {
  10. component: About
  11. }
  12. })

/home路由下定義了一個(gè)subRoutes選項(xiàng),/news/message是兩條子路由,它們分別表示路徑/home/news/home/message,這兩條路由分別映射組件News和Message。

該示例運(yùn)行如下:

37

View Demo

注意:這里有一個(gè)概念要區(qū)分一下,/home/news/home/message/home路由的子路由,與之對(duì)應(yīng)的News和Message組件并不是Home的子組件。

具名路徑(03)

在有些情況下,給一條路徑加上一個(gè)名字能夠讓我們更方便地進(jìn)行路徑的跳轉(zhuǎn),尤其是在路徑較長(zhǎng)的時(shí)候。

我們?cè)僮芳右粋€(gè)組件NewsDetail,該組件在訪問(wèn)/home/news/detail路徑時(shí)被渲染,組件模板:

  1. <template id="newsDetail"> <div>
  2. News Detail - {{$route.params.id}} ...... </div> </template>

組件構(gòu)造器:

  1. var NewsDetail = Vue.extend({
  2. template: '#newsDetail'
  3. })

具名路由映射

  1. router.map({ '/home': {
  2. component: Home,
  3. subRoutes: { '/news': {
  4. name: 'news',
  5. component: News,
  6. subRoutes: { 'detail/:id': {
  7. name: 'detail',
  8. component: NewsDetail
  9. }
  10. }
  11. }, '/message': {
  12. component: Message
  13. }
  14. }
  15. }, '/about': {
  16. component: About
  17. }
  18. })

注意:我們?cè)诙x/homes/news/home/news/detail/:id路由時(shí),給該路由指定了name屬性。
/:id是路由參數(shù),例如:如果要查看id = '01'的News詳情,那么訪問(wèn)路徑是/home/news/detail/01。

Home組件和News組件模板:

  1. <template id="home"> <div> <h1>Home</h1> <p>{{msg}}</p> </div> <div> <ul class="nav nav-tabs"> <li> <a v-link="{ name: 'news'}">News</a> </li> <li> <a v-link="{ path: '/home/message'}">Messages</a> </li> </ul> <router-view></router-view> </div> </template> <template id="news"> <div> <ul> <li> <a v-link="{ name: 'detail', params: {id: '01'} }">News 01</a> </li> <li> <a v-link="{ path: '/home/news/detail/02'}">News 02</a> </li> <li> <a v-link="{ path: '/home/news/detail/03'}">News 03</a> </li> </ul> <div> <router-view></router-view> </div> </div> </template>

<a v-link="{ name: 'news'}">News</a><a v-link="{ name: 'detail', params: {id: '01'} }">News 01</a>這兩行HTML代碼,使用了用了具名路徑。

該示例運(yùn)行如下:

image

View Demo

v-link指令

用了這么久的v-link指令,是該介紹一下它了。

v-link 是一個(gè)用來(lái)讓用戶在 vue-router 應(yīng)用的不同路徑間跳轉(zhuǎn)的指令。該指令接受一個(gè) JavaScript 表達(dá)式,并會(huì)在用戶點(diǎn)擊元素時(shí)用該表達(dá)式的值去調(diào)用 router.go

具體來(lái)講,v-link有三種用法:

  1. <!-- 字面量路徑 --> <a v-link="'home'">Home</a> <!-- 效果同上 --> <a v-link="{ path: 'home' }">Home</a> <!-- 具名路徑 --> <a v-link="{ name: 'detail', params: {id: '01'} }">Home</a>

v-link 會(huì)自動(dòng)設(shè)置 <a>href 屬性,你無(wú)需使用href來(lái)處理瀏覽器的調(diào)整,原因如下:

  • 它在 HTML5 history 模式和 hash 模式下的工作方式相同,所以如果你決定改變模式,或者 IE9 瀏覽器退化為 hash 模式時(shí),都不需要做任何改變。

  • 在 HTML5 history 模式下,v-link 會(huì)監(jiān)聽(tīng)點(diǎn)擊事件,防止瀏覽器嘗試重新加載頁(yè)面。

  • 在 HTML5 history 模式下使用 root 選項(xiàng)時(shí),不需要在 v-link 的 URL 中包含 root 路徑。

路由對(duì)象(04)

在使用了 vue-router 的應(yīng)用中,路由對(duì)象會(huì)被注入每個(gè)組件中,賦值為 this.$route ,并且當(dāng)路由切換時(shí),路由對(duì)象會(huì)被更新。

路由對(duì)象暴露了以下屬性:

  • $route.path
    字符串,等于當(dāng)前路由對(duì)象的路徑,會(huì)被解析為絕對(duì)路徑,如 "/home/news" 。
  • $route.params
    對(duì)象,包含路由中的動(dòng)態(tài)片段和全匹配片段的鍵值對(duì)
  • $route.query
    對(duì)象,包含路由中查詢參數(shù)的鍵值對(duì)。例如,對(duì)于 /home/news/detail/01?favorite=yes ,會(huì)得到$route.query.favorite == 'yes'
  • $route.router
    路由規(guī)則所屬的路由器(以及其所屬的組件)。
  • $route.matched
    數(shù)組,包含當(dāng)前匹配的路徑中所包含的所有片段所對(duì)應(yīng)的配置參數(shù)對(duì)象。
  • $route.name
    當(dāng)前路徑的名字,如果沒(méi)有使用具名路徑,則名字為空。

在頁(yè)面上添加以下代碼,可以顯示這些路由對(duì)象的屬性:

  1. <div> <p>當(dāng)前路徑:{{$route.path}}</p> <p>當(dāng)前參數(shù):{{$route.params | json}}</p> <p>路由名稱(chēng):{{$route.name}}</p> <p>路由查詢參數(shù):{{$route.query | json}}</p> <p>路由匹配項(xiàng):{{$route.matched | json}}</p> </div>

$route.path, $route.params, $route.name, $route.query這幾個(gè)屬性很容易理解,看示例就能知道它們代表的含義。

39

(由于$route.matched內(nèi)容較長(zhǎng),所以沒(méi)有將其顯示在畫(huà)面上)

這里我要稍微說(shuō)一下$router.matched屬性,它是一個(gè)包含性的匹配,它會(huì)將嵌套它的父路由都匹配出來(lái)。

例如,/home/news/detail/:id這條路徑,它包含3條匹配的路由:

  1. /home/news/detail/:id
  2. /home/news
  3. /home

另外,帶有 v-link 指令的元素,如果 v-link 對(duì)應(yīng)的 URL 匹配當(dāng)前的路徑,該元素會(huì)被添加特定的class,該class的默認(rèn)名稱(chēng)為v-link-active。例如,當(dāng)我們?cè)L問(wèn)/home/news/detail/03這個(gè)URL時(shí),根據(jù)匹配規(guī)則,會(huì)有3個(gè)鏈接被添加v-link-active。

image

View Demo

讓鏈接處于活躍狀態(tài)(05)

以上畫(huà)面存在兩個(gè)問(wèn)題:

  1. 當(dāng)用戶點(diǎn)擊Home鏈接或About鏈接后,鏈接沒(méi)有顯示為選中
  2. 當(dāng)用戶點(diǎn)擊News或Message鏈接后,鏈接沒(méi)有顯示為選中

設(shè)置activeClass

第1個(gè)問(wèn)題,可以通過(guò)設(shè)定v-link指令的activeClass解決。

  1. <a class="list-group-item" v-link="{ path: '/home', activeClass: 'active'}">Home</a>
  2. <a class="list-group-item" v-link="{ path: '/about', activeClass: 'active'}">About</a>

image

設(shè)定了v-link指令的activeClass屬性后,默認(rèn)的v-link-active被新的class取代。

image

第2個(gè)問(wèn)題,為v-link指令設(shè)定activeClass是不起作用的,因?yàn)槲覀兪褂玫氖莃ootstrap的樣式,需要設(shè)置a標(biāo)簽的父元素<li>才能讓鏈接看起來(lái)處于選中狀態(tài),就像下面的代碼所展現(xiàn)的:

  1. <ul class="nav nav-tabs"> <li class="active"> <a v-link="{ path: '/home/news'}">News</a> </li> <li> <a v-link="{ path: '/home/message'}">Messages</a> </li> </ul>

如何實(shí)現(xiàn)這個(gè)效果呢?你可能會(huì)想到,為Home組件的data選項(xiàng)追加一個(gè)currentPath屬性,然后使用以下方式綁定class。

  1. <ul class="nav nav-tabs"> <li :class="currentPath == '/home/news' ? 'active': ''"> <a v-link="{ path: '/home/news'}">News</a> </li> <li :class="currentPath == '/home/message' ? 'active': ''"> <a v-link="{ path: '/home/message'}">Messages</a> </li> </ul>

現(xiàn)在又出現(xiàn)了另一個(gè)問(wèn)題,在什么情況下給currentPath賦值呢?

用戶點(diǎn)擊v-link的元素時(shí),是路由的切換。
每個(gè)組件都有一個(gè)route選項(xiàng),route選項(xiàng)有一系列鉤子函數(shù),在切換路由時(shí)會(huì)執(zhí)行這些鉤子函數(shù)。
其中一個(gè)鉤子函數(shù)是data鉤子函數(shù),它用于加載和設(shè)置組件的數(shù)據(jù)。

  1. var Home = Vue.extend({
  2. template: '#home',
  3. data: function() { return {
  4. msg: 'Hello, vue router!',
  5. currentPath: ''
  6. }
  7. },
  8. route: {
  9. data: function(transition){
  10. transition.next({
  11. currentPath: transition.to.path
  12. })
  13. }
  14. }
  15. })

該示例運(yùn)行效果如下:

image

View Demo

鉤子函數(shù)(06)

路由的切換過(guò)程,本質(zhì)上是執(zhí)行一系列路由鉤子函數(shù),鉤子函數(shù)總體上分為兩大類(lèi):

  • 全局的鉤子函數(shù)
  • 組件的鉤子函數(shù)

全局的鉤子函數(shù)定義在全局的路由對(duì)象中,組件的鉤子函數(shù)則定義在組件的route選項(xiàng)中。

全局鉤子函數(shù)

全局鉤子函數(shù)有2個(gè):

  • beforeEach:在路由切換開(kāi)始時(shí)調(diào)用
  • afterEach:在每次路由切換成功進(jìn)入激活階段時(shí)被調(diào)用

組件的鉤子函數(shù)

組件的鉤子函數(shù)一共6個(gè):

  • data:可以設(shè)置組件的data
  • activate:激活組件
  • deactivate:禁用組件
  • canActivate:組件是否可以被激活
  • canDeactivate:組件是否可以被禁用
  • canReuse:組件是否可以被重用

切換對(duì)象

每個(gè)切換鉤子函數(shù)都會(huì)接受一個(gè) transition 對(duì)象作為參數(shù)。這個(gè)切換對(duì)象包含以下函數(shù)和方法:

  • transition.to
    表示將要切換到的路徑的路由對(duì)象
  • transition.from
    代表當(dāng)前路徑的路由對(duì)象。
  • transition.next()
    調(diào)用此函數(shù)處理切換過(guò)程的下一步。
  • transition.abort([reason])
    調(diào)用此函數(shù)來(lái)終止或者拒絕此次切換。
  • transition.redirect(path)
    取消當(dāng)前切換并重定向到另一個(gè)路由。

鉤子函數(shù)的執(zhí)行順序

全局鉤子函數(shù)和組件鉤子函數(shù)加起來(lái)一共8個(gè),為了熟練vue router的使用,有必要了解這些鉤子函數(shù)的執(zhí)行順序。

為了直觀地了解這些鉤子函數(shù)的執(zhí)行順序,在畫(huà)面上追加一個(gè)Vue實(shí)例:

  1. var well = new Vue({
  2. el: '.well',
  3. data: {
  4. msg: '',
  5. color: '#ff0000'
  6. },
  7. methods: {
  8. setColor: function(){ this.color = '#' + parseInt(Math.random()*256).toString(16)
  9. + parseInt(Math.random()*256).toString(16)
  10. + parseInt(Math.random()*256).toString(16)
  11. },
  12. setColoredMessage: function(msg){ this.msg += '<p style="color: ' + this.color + '">' + msg + '</p>'
  13. },
  14. setTitle: function(title){ this.msg = '<h2 style="color: #333">' + title + '</h2>'
  15. }
  16. }
  17. })

well實(shí)例的HTML:

  1. <div class="well">
  2. {{{ msg }}} </div>

然后,添加一個(gè)RouteHelper函數(shù),用于記錄各個(gè)鉤子函數(shù)的執(zhí)行日志:

  1. function RouteHelper(name) { var route = {
  2. canReuse: function(transition) {
  3. well.setColoredMessage('執(zhí)行組件' + name + '的鉤子函數(shù):canReuse') return true
  4. },
  5. canActivate: function(transition) {
  6. well.setColoredMessage('執(zhí)行組件' + name + '的鉤子函數(shù):canActivate')
  7. transition.next()
  8. },
  9. activate: function(transition) {
  10. well.setColoredMessage('執(zhí)行組件' + name + '的鉤子函數(shù):activate')
  11. transition.next()
  12. },
  13. canDeactivate: function(transition) {
  14. well.setColoredMessage('執(zhí)行組件' + name + '的鉤子函數(shù):canDeactivate')
  15. transition.next()
  16. },
  17. deactivate: function(transition) {
  18. well.setColoredMessage('執(zhí)行組件' + name + '的鉤子函數(shù):deactivate')
  19. transition.next()
  20. },
  21. data: function(transition) {
  22. well.setColoredMessage('執(zhí)行組件' + name + '的鉤子函數(shù):data')
  23. transition.next()
  24. }
  25. } return route;
  26. }

最后,將這些鉤子函數(shù)應(yīng)用于各個(gè)組件:

  1. var Home = Vue.extend({
  2. template: '#home',
  3. data: function() { return {
  4. msg: 'Hello, vue router!',
  5. path: ''
  6. }
  7. },
  8. route: RouteHelper('Home')
  9. }) var News = Vue.extend({
  10. template: '#news',
  11. route: RouteHelper('News')
  12. }) var Message = Vue.extend({
  13. template: '#message',
  14. route: RouteHelper('Message')
  15. }) var About = Vue.extend({
  16. template: '#about',
  17. route: RouteHelper('About')
  18. })

我們按照以下步驟做個(gè)小實(shí)驗(yàn):

  1. 運(yùn)行應(yīng)用(訪問(wèn)/home路徑)
  2. 訪問(wèn)/home/news路徑
  3. 訪問(wèn)/home/message路徑
  4. 訪問(wèn)/about路徑

image

View Demo

切換控制流水線

當(dāng)用戶點(diǎn)擊了/home/news鏈接,然后再點(diǎn)擊/home/message鏈接后,vue-router做了什么事情呢?它執(zhí)行了一個(gè)切換管道

image

如何做到這些呢?這個(gè)過(guò)程包含一些我們必須要做的工作:

  1. 可以重用組件Home,因?yàn)橹匦落秩竞?,組件Home依然保持不變。

  2. 需要停用并移除組件News。

  3. 啟用并激活組件Message。

  4. 在執(zhí)行步驟2和3之前,需要確保切換效果有效——也就是說(shuō),為保證切換中涉及的所有組件都能按照期望的那樣被停用/激活。

切換的各個(gè)階段

我們可以把路由的切換分為三個(gè)階段:可重用階段,驗(yàn)證階段和激活階段。

我們以home/news切換到home/message為例來(lái)描述各個(gè)階段。
(以下文字描述參考:http://router./zh-cn/pipeline/index.html

1. 可重用階段

檢查當(dāng)前的視圖結(jié)構(gòu)中是否存在可以重用的組件。這是通過(guò)對(duì)比兩個(gè)新的組件樹(shù),找出共用的組件,然后檢查它們的可重用性(通過(guò) canReuse 選項(xiàng))。默認(rèn)情況下, 所有組件都是可重用的,除非是定制過(guò)。

image

2. 驗(yàn)證階段

檢查當(dāng)前的組件是否能夠停用以及新組件是否可以被激活。這是通過(guò)調(diào)用路由配置階段的canDeactivatecanActivate 鉤子函數(shù)來(lái)判斷的。

image

3.激活階段

一旦所有的驗(yàn)證鉤子函數(shù)都被調(diào)用而且沒(méi)有終止切換,切換就可以認(rèn)定是合法的。路由器則開(kāi)始禁用當(dāng)前組件并啟用新組件。

image

此階段對(duì)應(yīng)鉤子函數(shù)的調(diào)用順序和驗(yàn)證階段相同,其目的是在組件切換真正執(zhí)行之前提供一個(gè)進(jìn)行清理和準(zhǔn)備的機(jī)會(huì)。界面的更新會(huì)等到所有受影響組件的 deactivateactivate 鉤子函數(shù)執(zhí)行之后才進(jìn)行。

data 這個(gè)鉤子函數(shù)會(huì)在 activate 之后被調(diào)用,或者當(dāng)前組件組件可以重用時(shí)也會(huì)被調(diào)用。

總結(jié)

本文主要介紹了以下內(nèi)容:

  • 介紹編寫(xiě)單頁(yè)面應(yīng)用的基本步驟
  • 介紹嵌套路由
  • 介紹具名路徑
  • 介紹路由對(duì)象
  • 介紹鉤子函數(shù)和執(zhí)行順序
  • 介紹組件切換控制流水線     

    本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間,所有內(nèi)容均由用戶發(fā)布,不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購(gòu)買(mǎi)等信息,謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請(qǐng)點(diǎn)擊一鍵舉報(bào)。
    轉(zhuǎn)藏 分享 獻(xiàn)花(0

    0條評(píng)論

    發(fā)表

    請(qǐng)遵守用戶 評(píng)論公約

    類(lèi)似文章 更多

    国产白丝粉嫩av在线免费观看| 国产精品午夜小视频观看| 五月综合激情婷婷丁香| 成人午夜视频在线播放| 自拍偷拍福利视频在线观看| 亚洲深夜精品福利一区| 国产午夜福利一区二区| 国产专区亚洲专区久久| 亚洲精品成人午夜久久| 日本一二三区不卡免费| 欧美性猛交内射老熟妇| 欧美日韩高清不卡在线播放| 免费啪视频免费欧美亚洲| 翘臀少妇成人一区二区| 日本高清不卡在线一区| 亚洲国产欧美精品久久| 国产成人精品在线一区二区三区| av中文字幕一区二区三区在线| 成人三级视频在线观看不卡| 亚洲最新的黄色录像在线| 色婷婷视频免费在线观看| 亚洲一区二区三区四区性色av| 国产又黄又猛又粗又爽的片| 国产在线一区二区三区不卡| 午夜福利大片亚洲一区| 草草夜色精品国产噜噜竹菊| 性欧美唯美尤物另类视频| 中文字幕一区二区三区中文| 免费观看潮喷到高潮大叫| 日本道播放一区二区三区| 一区二区三区日本高清| 日韩精品成区中文字幕| 蜜桃传媒视频麻豆第一区| 国产又色又爽又黄又大| 亚洲精品高清国产一线久久| 日本91在线观看视频| 国产中文字幕久久黄色片| 欧美人妻免费一区二区三区| 国产性情片一区二区三区| 亚洲国产婷婷六月丁香| 久久亚洲精品中文字幕|