Vue框架應(yīng)用實(shí)戰(zhàn)項(xiàng)目式教程 課件 任務(wù)6“就業(yè)服務(wù)”模塊設(shè)計(jì)；任務(wù)7 崗位信息異步渲染；任務(wù)8 文章數(shù)據(jù)全局管理

任務(wù)6“就業(yè)服務(wù)”模塊設(shè)計(jì)學(xué)習(xí)目標(biāo)在Vue這類單頁面應(yīng)用中如何進(jìn)行頁面跳轉(zhuǎn)功能呢？這就需要使用到Vue-router路由組件了，本章節(jié)我們將了解Vue的路由系統(tǒng)及其使用方法?！局R(shí)目標(biāo)】掌握路由的下載與配置；掌握路由規(guī)則的定義和使用；掌握路由嵌套的使用方法；熟悉編程式導(dǎo)航和帶參路由。【技能目標(biāo)】能夠使用Vue路由系統(tǒng)構(gòu)建較為復(fù)雜的單頁面應(yīng)用系統(tǒng)。【素質(zhì)目標(biāo)】培養(yǎng)開拓進(jìn)取精神。項(xiàng)目背景在學(xué)習(xí)了組件之后，同學(xué)們對于Vue框架構(gòu)建的整個(gè)項(xiàng)目系統(tǒng)就應(yīng)該擁有一個(gè)更清晰的結(jié)構(gòu)認(rèn)識(shí)了。在未接觸組件和路由系統(tǒng)之前，我們將所有的頁面和子組件都放置于【App.vue】主容器中，顯然這是不太合適的，如果項(xiàng)目一旦更為復(fù)雜，系統(tǒng)的結(jié)構(gòu)和可讀性就將變得非常差。在本任務(wù)中我們將重新調(diào)整項(xiàng)目結(jié)構(gòu)，以路由的形式更加合理的構(gòu)建項(xiàng)目，并通過路由實(shí)現(xiàn)“就業(yè)服務(wù)”模塊的開發(fā)和單頁面應(yīng)用跳轉(zhuǎn)。任務(wù)規(guī)劃本任務(wù)要求使用Vue路由系統(tǒng)進(jìn)行“就業(yè)服務(wù)”模塊的設(shè)計(jì)。任務(wù)6.1“就業(yè)服務(wù)”模塊導(dǎo)航設(shè)計(jì)【任務(wù)陳述】本任務(wù)要求使用Vue路由系統(tǒng)設(shè)計(jì)“就業(yè)服務(wù)”模塊導(dǎo)航功能，并實(shí)現(xiàn)“熱門招聘”和“就業(yè)服務(wù)”模塊之間的單頁面應(yīng)用鏈接和跳轉(zhuǎn)效果。頁面效果如圖6-1、圖6-2所示。圖6-1“熱門招聘”模塊任務(wù)6.1“就業(yè)服務(wù)”模塊導(dǎo)航設(shè)計(jì)【任務(wù)陳述】本任務(wù)要求使用Vue路由系統(tǒng)設(shè)計(jì)“就業(yè)服務(wù)”模塊導(dǎo)航功能，并實(shí)現(xiàn)“熱門招聘”和“就業(yè)服務(wù)”模塊之間的單頁面應(yīng)用鏈接和跳轉(zhuǎn)效果。頁面效果如圖6-1、圖6-2所示。圖6-2“就業(yè)服務(wù)”模塊任務(wù)6.1“就業(yè)服務(wù)”模塊導(dǎo)航設(shè)計(jì)【任務(wù)分析】一般而言一個(gè)相對完整的Vue項(xiàng)目中會(huì)包含一個(gè)主容器（App.vue）；若干頁面文件（通常放置于pages文件夾內(nèi)）和眾多組件文件（通常放置于components內(nèi)）。在本任務(wù)中我們將按照圖6-3所示的結(jié)構(gòu)重新梳理項(xiàng)目，并實(shí)現(xiàn)“熱門招聘”和“就業(yè)服務(wù)”模塊之間的單頁面應(yīng)用鏈接和跳轉(zhuǎn)效果。實(shí)現(xiàn)該任務(wù)需要同學(xué)們對以下知識(shí)有所掌握：vue-router的安裝與配置；vue-router基礎(chǔ)使用；路由鏈接樣式的設(shè)置；路由重定向的設(shè)置。圖6-3路由系統(tǒng)重構(gòu)圖任務(wù)6.1“就業(yè)服務(wù)”模塊導(dǎo)航設(shè)計(jì)【任務(wù)實(shí)施】步驟一.路由的下載與配置。Vue-router是Vue官方的路由插件，它和Vue是深度集成的，適合用于構(gòu)建單頁面應(yīng)用。Vue的單頁面應(yīng)用是基于路由和組件的，路由用于設(shè)定訪問路徑，并將路徑和組件映射起來。傳統(tǒng)的頁面應(yīng)用，是用一些超鏈接來實(shí)現(xiàn)頁面切換和跳轉(zhuǎn)的。在Vue-router單頁面應(yīng)用中，則是路徑之間的切換，也就是組件的切換。路由模塊的本質(zhì)就是建立起url地址和組件之間的映射關(guān)系。接下來我們進(jìn)行Vue-router路由插件的下載與配置在項(xiàng)目根目錄中使用npm包管理工具下載Vue-Router路由插件。npminstallvue-router-S新建路由配置規(guī)則，路由的本質(zhì)其實(shí)就是一種對應(yīng)關(guān)系，比如說我們在瀏覽器地址欄中輸入需要訪問的URL地址之后，瀏覽器要去請求這個(gè)URL地址對應(yīng)的資源。那么URL地址和真實(shí)的資源之間就有一種對應(yīng)的關(guān)系，也就是路由。任務(wù)6.1“就業(yè)服務(wù)”模塊導(dǎo)航設(shè)計(jì)【任務(wù)實(shí)施】步驟一.路由的下載與配置。在項(xiàng)目根目錄下新建router文件夾，并在該文件夾中新建index.js文件輸入如下代碼，用于配置路由規(guī)則。

//1、導(dǎo)入包

import{createRouter,createWebHashHistory}from"vue-router";

//2、制定路由規(guī)則，路由規(guī)則是一個(gè)數(shù)組，我們暫時(shí)置空

constroutes=[]

//3、使用工廠函數(shù)創(chuàng)建路由

constrouter=createRouter({

//配置路由模式為Hash模式

history:createWebHashHistory(),

//將路由規(guī)則掛載到router的routes屬性上

routes:routes

})

//4、導(dǎo)出路由

exportdefaultrouter通過以上代碼我們便完成了一個(gè)簡單的Vue路由配置，但是目前routes數(shù)組暫時(shí)為空，也就是路由地址和Vue組件之間的對應(yīng)關(guān)系暫時(shí)還未建立。任務(wù)6.1“就業(yè)服務(wù)”模塊導(dǎo)航設(shè)計(jì)【任務(wù)實(shí)施】步驟一.路由的下載與配置。掛載路由系統(tǒng)到Vue實(shí)例上，在main.js中輸入如下代碼，進(jìn)行路由系統(tǒng)的掛載。

import{createApp}from'vue'

importAppfrom'./App.vue'

//導(dǎo)入路由

importrouterfrom'./router/index.js'

constapp=createApp(App)

//掛載路由

app.use(router)

app.mount('#app')我們可以給<transition>組件傳一個(gè)name屬性來聲明一個(gè)過渡效果名，對于一個(gè)有名字的過渡效果，對它起作用的過渡樣式會(huì)以其名字而不是“v-”作為前綴。這樣做的好處是能夠?yàn)槊恳粋€(gè)。至此我們便完成了一個(gè)簡單路由系統(tǒng)的配置。解析來我們將重新設(shè)計(jì)項(xiàng)目解構(gòu)，建立項(xiàng)目組件資源和路由地址的一一對應(yīng)關(guān)系。任務(wù)6.1“就業(yè)服務(wù)”模塊導(dǎo)航設(shè)計(jì)【任務(wù)實(shí)施】步驟二.路由規(guī)則的建立。（1）在項(xiàng)目src目錄下新建pages文件夾用于放置頁面文件。在pages目錄中新建MessageBoard.vue（熱門招聘頁），和Articles.vue（就業(yè)服務(wù)頁）。項(xiàng)目結(jié)構(gòu)如圖6-4所示。（2）將原來App.vue中container容器里的內(nèi)容遷移至MessageBoard.vue組件內(nèi)，同時(shí)將<script>標(biāo)簽內(nèi)的相關(guān)代碼也遷移至MessageBoard.vue組件中。通過這一步驟將原有熱門招聘頁的內(nèi)容分離至MessageBoard.vue組件中，使得項(xiàng)目更具模塊化，便于后期管理與維護(hù)。圖6-4pages目錄結(jié)構(gòu)任務(wù)6.1“就業(yè)服務(wù)”模塊導(dǎo)航設(shè)計(jì)【任務(wù)實(shí)施】步驟二.路由規(guī)則的建立。（3）在Articles.vue頁面中布局就業(yè)服務(wù)頁基礎(chǔ)結(jié)構(gòu)。

<template>

<div>

<navclass="py-2bg-lightborder-bottom">

<divclass="containerd-flexflex-wrap">

<ulclass="navme-auto">

<liclass="nav-item">

<ahref="#"

class="nav-linklink-secondarypx-2">

推薦好文

</a>

</li>

<liclass="nav-item">

<ahref="#"

class="nav-linklink-secondarypx-2">

生態(tài)系統(tǒng)

</a>

</li>

</ul>

</div>

</nav>

</div>

</template>任務(wù)6.1“就業(yè)服務(wù)”模塊導(dǎo)航設(shè)計(jì)【任務(wù)實(shí)施】步驟二.路由規(guī)則的建立。（4）在router目錄下的index.js中配置Vue組件與路由地址之間的對應(yīng)規(guī)則。

//1.導(dǎo)入路由需要的包

import{createWebHashHistory,createRouter}from"vue-router";

//2.導(dǎo)入相關(guān)組件

importArticlesfrom"../pages/Articles.vue"

importMessageBoardfrom"../pages/MessageBoard.vue"

//3.制定路由規(guī)則

constroutes=[

{path:"/messageboard",name:"熱門招聘",component:MessageBoard},

{path:"/articles",name:"就業(yè)服務(wù)",component:Articles}

]

//4.使用工程函數(shù)創(chuàng)建路由實(shí)例

constrouter=createRouter({

routes:routes,

history:createWebHashHistory()

})

//5.導(dǎo)出路由

exportdefaultrouter通過步驟二的配置，我們便成功建立了Vue組件資源與路由地址之間的一一對應(yīng)關(guān)系。任務(wù)6.1“就業(yè)服務(wù)”模塊導(dǎo)航設(shè)計(jì)【任務(wù)實(shí)施】步驟三.配置頁面路由鏈接與路由視圖。因?yàn)閂ue是單頁面應(yīng)用，無法和傳統(tǒng)HTML網(wǎng)站一樣實(shí)現(xiàn)多頁面鏈接跳轉(zhuǎn)。此時(shí)就需要使用<router-view>標(biāo)簽進(jìn)行頁面渲染。<router-view>標(biāo)簽是Vue-router提供的元素，當(dāng)路由規(guī)則匹配到的對應(yīng)的組件時(shí)，就會(huì)將這個(gè)組件渲染到<router-view>中。所以我們可以把<router-view>認(rèn)為是一個(gè)頁面占位符，專門用于渲染路由規(guī)則對應(yīng)的組件。在App.vue中通過<router-link>路由導(dǎo)航標(biāo)簽指定跳轉(zhuǎn)路徑，并使用<router-view>標(biāo)簽加載路由視圖。

<template>

<div>

<!--導(dǎo)航欄-->

<headerclass="d-flexflex-wrapalign-items-center

justify-content-centerpy-3

border-bottom">

<ulclass="navcol-12col-md-automb-2

justify-content-centermb-md-0">

<li>

<!--router-link路由導(dǎo)航-->

<router-linkto="/messageboard"

class="nav-linkpx-2

link-dark">

熱門招聘

</router-link>

</li>

<li>

<!--router-link路由導(dǎo)航-->

<router-linkto="/articles"

class="nav-linkpx-2

link-secondary">

就業(yè)服務(wù)

</router-link>

</li>

</ul>

</header>

<!--路由視圖-->

<router-view></router-view>

</div>

</template>任務(wù)6.1“就業(yè)服務(wù)”模塊導(dǎo)航設(shè)計(jì)【任務(wù)實(shí)施】步驟四.配置路由重定向與激活樣式。接下來我們對路由系統(tǒng)進(jìn)行路由重定向與激活樣式。配置路由重定向規(guī)則，當(dāng)訪問項(xiàng)目首頁時(shí)，能自動(dòng)跳轉(zhuǎn)至“/messageboard”地址，即展示“就業(yè)招聘”頁。在router目錄下的index.js中輸入如下代碼進(jìn)行重定向配置。

//

//3.制定路由規(guī)則

constroutes=[

//路由重定向配置

{path:"/",redirect:"/messageboard"},

{path:"/messageboard",name:"熱門招聘",component:MessageBoard},

{path:"/articles",name:"就業(yè)服務(wù)",component:Articles}

]

//任務(wù)6.1“就業(yè)服務(wù)”模塊導(dǎo)航設(shè)計(jì)【任務(wù)實(shí)施】步驟四.配置路由重定向與激活樣式。配置路由激活樣式，在在router目錄下的index.js中指定router-link路由導(dǎo)航被激活時(shí)，它所呈現(xiàn)的樣式為“l(fā)ink-dark”。

//

//3.制定路由規(guī)則

constroutes=[

//路由重定向配置

{path:"/",redirect:"/messageboard"},

{path:"/messageboard",name:"熱門招聘",component:MessageBoard},

{path:"/articles",name:"就業(yè)服務(wù)",component:Articles}

]任務(wù)6.1“就業(yè)服務(wù)”模塊導(dǎo)航設(shè)計(jì)【任務(wù)實(shí)施】步驟四.配置路由重定向與激活樣式。

//4.使用工程函數(shù)創(chuàng)建路由實(shí)例

constrouter=createRouter({

//路由激活樣式配置linkActiveClass:"link-dark",

routes:routes,

history:createWebHashHistory()

})

//通過“npmrundev”命令重新渲染項(xiàng)目，點(diǎn)擊“熱門招聘”和“就業(yè)服務(wù)”導(dǎo)航按鈕，便可看到如圖6-1，圖6-2所示頁面效果。任務(wù)6.1“就業(yè)服務(wù)”模塊導(dǎo)航設(shè)計(jì)【知識(shí)鏈接】6.1.1路由介紹路由分為前端路由和后端路由。在Vue中，我們主要學(xué)習(xí)的是前端路由。前端路由就是根據(jù)不同的事件來顯示不同的頁面內(nèi)容，即事件與事件處理函數(shù)之間的對應(yīng)關(guān)系，路由主要根據(jù)監(jiān)聽事件并分發(fā)執(zhí)行事件處理函數(shù)。VueRouter是Vue.js官方的路由管理器。它和Vue的核心深度集成，讓構(gòu)建單頁面應(yīng)用變得易如反掌。路由實(shí)際上就是可以理解為指向，就是我在頁面上點(diǎn)擊一個(gè)按鈕需要展示對應(yīng)的組件，這就是路由跳轉(zhuǎn)。VueRouter的主要功能包括：嵌套路由映射；動(dòng)態(tài)路由選擇；模塊化、基于組件的路由配置；路由參數(shù)、查詢、通配符；展示由Vue.js的過渡系統(tǒng)提供的過渡效果；細(xì)致的導(dǎo)航控制；自動(dòng)激活CSS類的鏈接；HTML5history模式或hash模式；可定制的滾動(dòng)行為；URL的正確編碼。在Vue中我們可以通過以下命令進(jìn)行路由的安裝：

npminstallvue-router任務(wù)6.1“就業(yè)服務(wù)”模塊導(dǎo)航設(shè)計(jì)【知識(shí)鏈接】6.1.2路由的使用路由分為前端路由和后端路由。在Vue中，我們主要學(xué)習(xí)的是前端路由。前端路由就是根據(jù)不同的事件來顯示不同的頁面內(nèi)容，即事件與事件處理函數(shù)之間的對應(yīng)關(guān)系，路由主要根據(jù)監(jiān)聽事件并分發(fā)執(zhí)行事件處理函數(shù)。路由的主要包括路由導(dǎo)航、路由視圖、路由規(guī)則等模塊，如圖6-5所示。路由導(dǎo)航router-link組件用來創(chuàng)建鏈接，類似于常規(guī)的<a>標(biāo)簽。這使得VueRouter可以在不重新加載頁面的情況下更改URL，處理URL的生成以及編碼。路由視圖router-view組件將顯示與URL對應(yīng)的組件。你可以把它放在任何地方，以適應(yīng)你的布局。不同的router-view組件可以使用name屬性加以區(qū)分。圖6-5路由核心模塊任務(wù)6.1“就業(yè)服務(wù)”模塊導(dǎo)航設(shè)計(jì)【知識(shí)鏈接】6.1.2路由的使用接下來我們通過【例6-1】案例講解Vue路由系統(tǒng)的使用?！纠?-1】路由系統(tǒng)案例。具體步驟如下。（1）新建Vue項(xiàng)目，在src目錄下新建components文件夾，用于放置應(yīng)用組件。在【components】文件夾下新建【Poetry.vue】和【Prose.vue】組件，分別用于表示“古詩”頁面和“散文”頁面，如圖6-6所示。圖6-6組件目錄結(jié)構(gòu)任務(wù)6.1“就業(yè)服務(wù)”模塊導(dǎo)航設(shè)計(jì)6.1.2路由的使用（2）在【Poetry.vue】組件和【Prose.vue】組件中輸入如下代碼。【Poetry.vue】

<template>

<ol>

<li>春江花月夜——張若虛</li>

<li>江畔獨(dú)步尋花——杜甫</li>

<li>獨(dú)坐敬亭山——李白</li>

<li>江南春——杜牧</li>

<li>竹里館——王維</li>

<li>望洞庭——?jiǎng)⒂礤a</li>

<li>江雪——柳宗元</li>

</ol>

</template>【Prose.vue】

<template>

<ol>

<li>話說謙讓——梁實(shí)秋</li>

<li>風(fēng)中跌倒不為風(fēng)——林清玄</li>

<li>人生的樂趣——林語堂</li>

<li>北平的四季——郁達(dá)夫</li>

<li>為了忘卻的紀(jì)念——魯迅</li>

<li>緣起緣滅還自在——李叔同</li>

<li>非走不可的彎路——張愛玲</li>

</ol>

</template>任務(wù)6.1“就業(yè)服務(wù)”模塊導(dǎo)航設(shè)計(jì)6.1.2路由的使用（3）新建【router】文件夾，在【router】文件夾中新建【index.js】文件，用于書寫路由配置。頁面結(jié)構(gòu)如圖6-7所示。圖6-7路由目錄結(jié)構(gòu)任務(wù)6.1“就業(yè)服務(wù)”模塊導(dǎo)航設(shè)計(jì)6.1.2路由的使用（4）在【index.js】中輸入如下代碼，配置路由規(guī)則。

import{createWebHashHistory,createRouter}from"vue-router";

importPoetryfrom'../components/Poetry.vue'

importProsefrom'../components/Prose.vue'

constroutes=[

{path:'/poetry',name:"古詩",component:Poetry},

{path:'/prose',

name:"散文",component:Prose}

]

constrouter=createRouter({

history:createWebHashHistory(),

routes:routes

});

exportdefaultrouter在以上代碼中，我們定義了數(shù)組routes用于配置路由資源，當(dāng)訪問不同的URL地址時(shí)，路由分配展示不同的組件。path表示URL路徑；name表示當(dāng)路由指向此頁面時(shí)顯示的名字；component表示URL地址對應(yīng)加載的組件。任務(wù)6.1“就業(yè)服務(wù)”模塊導(dǎo)航設(shè)計(jì)6.1.2路由的使用（5）設(shè)計(jì)好的路由規(guī)則需要掛載到Vue實(shí)例上，在【main.js】文件夾中引入路由規(guī)則并全局注冊。

import{createApp}from'vue'

importAppfrom'./App.vue'

importrouterfrom'./router/index.js'

constapp=createApp(App)

app.use(router)

app.mount('#app')（6）在【App.vue】使用<router-link>標(biāo)簽定義鏈接地址，<router-view>展示路由組件。

<template>

<div>

<router-linkto="/poetry">

<button>古詩</button>

</router-link>

<router-linkto="/prose">

<button>散文</button>

</router-link>

<router-view></router-view>

</div>

</template>任務(wù)6.1“就業(yè)服務(wù)”模塊導(dǎo)航設(shè)計(jì)6.1.2路由的使用（6）在【App.vue】使用<router-link>標(biāo)簽定義鏈接地址，<router-view>展示路由組件。

<scriptsetup>

</script>

<style>

*{

margin:0;

padding:0;

}

通過“npmrundev”命令運(yùn)行項(xiàng)目，點(diǎn)擊“古詩”和“散文”按鈕即可完成不同組件的加載和展示。

button{

border:none;

width:100px;

height:26px;

border-radius:26px;

background-color:orange;

color:white;

margin:10px;

}

ol{

list-style-position:inside;

}

olli:nth-child(2n+1){

background-color:skyblue;

}

</style>任務(wù)6.1“就業(yè)服務(wù)”模塊導(dǎo)航設(shè)計(jì)6.1.2路由的使用效果如圖6-8所示。圖6-8項(xiàng)目運(yùn)行效果任務(wù)6.1“就業(yè)服務(wù)”模塊導(dǎo)航設(shè)計(jì)6.1.3路由重定向路由重定向就是指通過路由方法將某個(gè)網(wǎng)絡(luò)請求重新定向，轉(zhuǎn)到其它位置。例如讓一個(gè)路由地址A與另一個(gè)路由地址B聯(lián)系起來，執(zhí)行A的時(shí)候會(huì)跳轉(zhuǎn)執(zhí)行B。在Vue中路由重定向可以通過redirect關(guān)鍵字指定。例如：

constroutes=[

//首頁路由重新定向到登錄頁

{path:'/',redirect:'/login'},

{path:'/login',name:'登錄界面',component:login},

{path:'/res',name:'注冊界面',component:res},

]在以上代碼中，通過redirect進(jìn)行路由的重定向，當(dāng)路由進(jìn)入主頁“/”時(shí)，將會(huì)被重定向至登錄頁“/login”。任務(wù)6.1“就業(yè)服務(wù)”模塊導(dǎo)航設(shè)計(jì)6.1.4路由激活樣式所謂的路由激活樣式就是指當(dāng)某個(gè)<router-link>路由導(dǎo)航被激活時(shí)，它所呈現(xiàn)的樣式。我們可以通過linkActiveClass設(shè)置路由的激活樣式。例如：

constroutes=[

{path:'/login',name:'登錄界面',component:login},

{path:'/res',name:'注冊界面',component:res},

]

constrouter=createRouter({

//路由激活樣式

linkActiveClass:'active',

history:createWebHistory(),

routes:routes,

})當(dāng)制定路由規(guī)則時(shí)，我們可以設(shè)置路由激活時(shí)呈現(xiàn)的樣式為"active"。接下來只需要定義"active"所呈現(xiàn)的樣式即可。

<stylescoped>

.active{

background:yellow;

}

</style>任務(wù)6.1“就業(yè)服務(wù)”模塊導(dǎo)航設(shè)計(jì)6.1.5路由模式在創(chuàng)建路由器實(shí)例時(shí)，有兩種模式可供選擇，分別是哈希模式和HTML5模式。哈希模式使用以下方式進(jìn)行創(chuàng)建：

import{createRouter,createWebHashHistory}from'vue-router'

constrouter=createRouter({

history:createWebHashHistory(),

routes:[

//...

],

})HTML5模式使用以下方式進(jìn)行創(chuàng)建：

import{createRouter,createWebHistory}from'vue-router'

constrouter=createRouter({

history:createWebHistory(),

routes:[

//...

],

})哈希模式的路由地址上將出現(xiàn)一個(gè)哈希字符（#），例如“:5173/#/user”，而HTML5模式的路由地址則會(huì)看起來很"正常"，例如“:5173/user”。任務(wù)6.2“就業(yè)服務(wù)”模塊子路由設(shè)計(jì)【任務(wù)陳述】本任務(wù)要求設(shè)計(jì)“就業(yè)服務(wù)”子模塊，通過路由的嵌套模式，在“就業(yè)服務(wù)”模塊下設(shè)計(jì)子路由，能夠?qū)崿F(xiàn)“就業(yè)指導(dǎo)”和“推薦企業(yè)”界面的跳轉(zhuǎn)切換。頁面效果如圖6-9、圖6-10所示。圖6-9“就業(yè)指導(dǎo)”子頁面效果圖6-10“推薦企業(yè)”子頁面效果任務(wù)6.2“就業(yè)服務(wù)”模塊子路由設(shè)計(jì)【任務(wù)分析】完成本任務(wù)需要在“就業(yè)服務(wù)”模塊下部署“就業(yè)指導(dǎo)”和“推薦企業(yè)”兩個(gè)子模塊，模塊結(jié)構(gòu)如圖6-11所示。同時(shí)需要實(shí)現(xiàn)兩個(gè)子模塊的跳轉(zhuǎn)鏈接，這就需要同學(xué)們對以下知識(shí)有所掌握：路由的嵌套規(guī)則；嵌套路由的使用。圖6-11“就業(yè)服務(wù)”子模塊結(jié)構(gòu)任務(wù)6.2“就業(yè)服務(wù)”模塊子路由設(shè)計(jì)【任務(wù)實(shí)施】步驟一.配置嵌套路由。在【components】文件夾下新建List.vue和Grid.vue，用于設(shè)計(jì)“就業(yè)指導(dǎo)”和“推薦企業(yè)”組件文件。項(xiàng)目結(jié)構(gòu)如圖6-12所示。圖6-12“就業(yè)服務(wù)”子模塊文件夾結(jié)構(gòu)List.vue和Grid.vue組件代碼參考如下代碼片段：【List.vue】：

<template>

<div>

<divclass="list-groupps-5pe-5pt-5pb-5">

<!--文章列表-->

<divclass="list-group-itemlist-group-item-action

d-flexgap-3py-3"

style="cursor:pointer">

<divclass="d-flexgap-2w-100

justify-content-between">

<div>

<h6class="mb-0">初入職場，如何自我介紹？}</h6>

<pclass="mb-0opacity-75">陳曉</p>

</div>

<smallclass="opacity-50text-nowrap">

初入職場，做好個(gè)人介紹是邁向成功的第一步。

</small>

</div>

</div>

</div>

</div>

</template>任務(wù)6.2“就業(yè)服務(wù)”模塊子路由設(shè)計(jì)【任務(wù)實(shí)施】步驟一.配置嵌套路由。在router文件夾下的index.js中定義嵌套路由的規(guī)則。路由規(guī)則的嵌套子路由掛載在其“children”屬性下。

import{createWebHashHistory

,createRouter}from"vue-router";

importArticlesfrom"../pages/Articles"

importMessageBoardfrom"../pages/MessageBoard"

//導(dǎo)入嵌套路由組件

importGridfrom"../components/Grid"

importListfrom"../components/List"

//配置路由規(guī)則

constroutes=[

{path:"/",redirect:"/messageboard"},

{path:"/messageboard",name:"熱門招聘",component:MessageBoard,

{path:"/articles",name:"就業(yè)服務(wù)",component:Articles,

//嵌套路由規(guī)則

children:[

//就業(yè)指導(dǎo)頁面子路由

{path:'list',component:List},

//推薦企業(yè)頁面子路由

{path:'grid',component:Grid},

]

}

]

//創(chuàng)建路由

constrouter=createRouter({

linkActiveClass:"link-dark",

history:createWebHashHistory(),

routes:routes

})

//導(dǎo)出路由

exportdefaultrouter需要注意的是在嵌套路由中不需要添加"/"路徑符號(hào)?！綠rid.vue】：

<template>

<divclass="list-groupps-5pe-5pt-5pb-5">

<!--文章列表-->

<divclass="list-group-itemlist-group-item-action

d-flexgap-3py-3"

style="cursor:pointer">

<divclass="d-flexgap-2w-100justify-content-between">

<div>

<h6class="mb-0">華為</h6>

<pclass="mb-0opacity-75">

華為技術(shù)有限公司成立于1987年，總部位于廣東省深圳市。

</p>

</div>

</div>

</div><!--文章列表

--><!---->

</div>

</template>任務(wù)6.2“就業(yè)服務(wù)”模塊子路由設(shè)計(jì)【任務(wù)實(shí)施】

步驟二.使用嵌套路由。vivify.css是一個(gè)強(qiáng)大的動(dòng)畫庫，通過該動(dòng)畫庫能夠方便快速的設(shè)計(jì)頁面交互動(dòng)畫。在【pages】文件夾下的【Articles.vue】中定義路由導(dǎo)航和路由視圖。<!--路由導(dǎo)航-->

<router-linkto="/articles/grid"

class="nav-linklink-secondarypx-2">

推薦企業(yè)

</router-link>

</li>

</ul>

</div>

<!--路由視圖-->

<router-view></router-view>

</nav>

</div>

</template>對嵌套的子路由進(jìn)行路由重定向。

constroutes=[

{path:"/",redirect:"/messageboard"},

{path:"/messageboard",name:"熱門招聘",component:MessageBoard,

{path:"/articles",name:"就業(yè)服務(wù)",component:Articles},//嵌套路由規(guī)則

children:[

//子路由重定向

{path:"/articles",redirect:"/articles/list"},

{path:'list',component:List},

//推薦企業(yè)頁面子路由

{path:'grid',component:Grid},

]

}

]對嵌套的子路由進(jìn)行路由重定向。通過redirect關(guān)鍵詞，將“/articles”頁面重定向至“/articles/list”就業(yè)指導(dǎo)頁。<template>

<div>

<navclass="py-2bg-lightborder-bottom">

<divclass="containerd-flexflex-wrap">

<ulclass="navme-auto">

<liclass="nav-item">

<!--路由導(dǎo)航-->

<router-linkto="/articles/list"

class="nav-linklink-secondarypx-2">

就業(yè)指導(dǎo)

</router-link>

</li>

<liclass="nav-item">任務(wù)6.2“就業(yè)服務(wù)”模塊子路由設(shè)計(jì)【知識(shí)鏈接】6.2.1路由嵌套一些應(yīng)用程序的界面視圖由多層嵌套的組件構(gòu)成。在這種情況下，URL的片段通常對應(yīng)于特定的嵌套組件結(jié)構(gòu)，如圖6-13所示，URL的路徑對應(yīng)相應(yīng)的嵌套組件。圖6-13嵌套組件的URL地址標(biāo)識(shí)通過VueRouter的嵌套路由配置，可以來表達(dá)這種層次關(guān)系。我們在【例6-1】的基礎(chǔ)之上繼續(xù)補(bǔ)充代碼，對路由的嵌套使用進(jìn)行解釋說明。任務(wù)6.2“就業(yè)服務(wù)”模塊子路由設(shè)計(jì)【知識(shí)鏈接】6.2.1路由嵌套（1）在components文件夾下新建libai.vue和dumu.vue，用于表示“李白”和“杜牧”詩選頁面?！綿umu.vue】：

<template>

<p>杜牧（803年－約852年），字牧之，號(hào)樊川居士，京兆萬年（今陜西西安）人，唐代杰出的詩人、散文家，與李商隱并稱“小李杜”。杜牧在26歲中進(jìn)士，先后官至弘文館校書郎，淮南節(jié)度使幕，理人國史館修撰，黃州、睦州刺史等職。詩歌以七言絕句著稱，內(nèi)容以詠史抒懷為主，其詩英發(fā)俊爽，多切經(jīng)世之物，在晚唐成就頗高。</p>

<h4>代表作</h4>

<ol>

<li>泊秦淮</li>

<li>江南春</li>

<li>赤壁</li>

<li>赤壁</li>

</ol>

</template>【libai.vue】：

<template>

<p>李白（701年5月19日－762年11月30日），字太白，號(hào)青蓮居士，中國唐朝詩人。為人爽朗大方，樂于交友，愛好飲酒作詩，名列“酒中八仙”。為人爽朗大方，樂于交友，愛好飲酒作詩，名列“酒中八仙”。著有《李太白集》，代表作有《望廬山瀑布》《行路難》《蜀道難》《將進(jìn)酒》《早發(fā)白帝城》等。</p>

<h4>代表作</h4>

<ol>

<li>望廬山瀑布</li>

<li>行路難</li>

<li>蜀道難</li>

<li>將進(jìn)酒</li>

<li>早發(fā)白帝城</li>

</ol>

</template>任務(wù)6.2“就業(yè)服務(wù)”模塊子路由設(shè)計(jì)【知識(shí)鏈接】6.2.1路由嵌套（2）在router文件夾下的index.js中定義“古詩詞”頁面（Poetry.vue）的子路由。需要注意的是，子路由路徑是不需要加“/”路徑符號(hào)的。

import{createWebHashHistory,createRouter}from"vue-router";

importPoetryfrom'../components/Poetry.vue'

importProsefrom'../components/Prose.vue'

importlibaifrom'../components/libai.vue'

importdumufrom'../components/dumu.vue'

constroutes=[//表示訪問首頁時(shí)默認(rèn)被重定向至“古詩”頁面

{path:'/',redirect:'/poetry'},

{path:'/poetry',name:"古詩詞",component:Poetry,

//定義子路由規(guī)則

children:[

{path:'libai',component:libai},

{path:'dumu',component:dumu},

]

},

{path:'/prose',name:"散文",component:Prose}

]

constrouter=createRouter({

linkActiveClass:'active',//表示路由激活時(shí)使用active樣式

history:createWebHashHistory(),

routes:routes

});

exportdefaultrouter任務(wù)6.2“就業(yè)服務(wù)”模塊子路由設(shè)計(jì)【知識(shí)鏈接】6.2.1路由嵌套（3）在“古詩詞”頁面（Poetry.vue）配置路由導(dǎo)航和路由視圖。

<template>

<ol>

<li>春江花月夜——張若虛</li>

<li>江畔獨(dú)步尋花——杜甫</li>

<li>獨(dú)坐敬亭山——李白</li>

<li>江南春——杜牧</li>

<li>竹里館——王維</li>

<li>望洞庭——?jiǎng)⒂礤a</li>

<li>江雪——柳宗元</li>

</ol>

相關(guān)鏈接：

<p><router-linkto="/poetry/libai">李白經(jīng)典</router-link></p>

<p><router-linkto="/poetry/dumu">杜牧經(jīng)典</router-link></p>

<router-view></router-view>

</template>（4）運(yùn)行代碼，點(diǎn)擊子路由導(dǎo)航鏈接，頁面效果如圖6-14所示。圖6-14子路由界面效果任務(wù)6.3“就業(yè)指導(dǎo)”文章詳情頁開發(fā)【任務(wù)陳述】本任務(wù)要求開發(fā)“就業(yè)指導(dǎo)”模塊的文章詳情頁。通過點(diǎn)擊文章列表能夠跳轉(zhuǎn)至文章詳情頁面，效果如圖6-15、圖6-16所示?！救蝿?wù)分析】完成該任務(wù)需要同學(xué)們了解并且掌握以下知識(shí)內(nèi)容掌握帶參數(shù)的動(dòng)態(tài)路由匹配規(guī)則；了解編程式導(dǎo)航；掌握編程式導(dǎo)航中的使用方法。圖6-15文章列表頁圖6-16文章詳情頁任務(wù)6.3“就業(yè)指導(dǎo)”文章詳情頁開發(fā)【任務(wù)實(shí)施】步驟一.帶參路由規(guī)則制定新建"文章詳情頁"組件SingleArticle.vue，并放置于components文件夾中。文件目錄如圖6-17所示。圖6-17"文章詳情頁"組件目錄在router文件夾下的index.js中制定路由匹配規(guī)則，當(dāng)訪問/article/:id的帶參URL地址時(shí)能夠展示SingleArticle.vue組件。

//導(dǎo)入組件

importSingleArticlefrom"../components/SingleArticle"

//3制定路由規(guī)則

constroutes=[

{path:"/",redirect:"/messageboard"},

//當(dāng)訪問/article/:id的URL地址時(shí)能夠展示SingleArticle組件

{path:"/article/:id",name:"文章詳情",component:SingleArticle},

{path:"/articles",name:"就業(yè)服務(wù)",component:Articles,

children:[

{path:"/articles",redirect:"/articles/list"},

{path:"list",name:"就業(yè)指導(dǎo)",component:List},

{path:"grid",name:"推薦企業(yè)",component:Grid},

?

]},

{path:"/messageboard",name:"熱門招聘",component:MessageBoard}

]任務(wù)6.3“就業(yè)指導(dǎo)”文章詳情頁開發(fā)【任務(wù)實(shí)施】步驟一.帶參路由規(guī)則制定在List.vue“就業(yè)指導(dǎo)”頁的列表文章中使用v-on綁定goArticle()方法，在goArticle()方法中通過編程式路由跳轉(zhuǎn)至文章詳情頁。

<template>

<div>

<divclass="list-groupps-5pe-5pt-5pb-5">

<!--文章列表通過v-on綁定goArticle方法-->

<divclass="list-group-itemlist-group-item-action

d-flexgap-3py-3"

style="cursor:pointer"

v-on:click="goArticle">

</div>

</div>

</div>

</template>

<scriptsetup>

import{useRouter}from'vue-router'

constrouter=useRouter()

//通過編程式導(dǎo)航，攜帶參數(shù)跳轉(zhuǎn)至文章詳情頁

functiongoArticle(item){

router.push("/article/"+item.id)

}

</script>任務(wù)6.3“就業(yè)指導(dǎo)”文章詳情頁開發(fā)【任務(wù)實(shí)施】步驟一.帶參路由規(guī)則制定

因?yàn)樾枰诤罄m(xù)的設(shè)計(jì)中，文章詳情頁內(nèi)需要通過"返回"按鈕回到上一頁，所以需要使用能夠保存歷史記錄的router.push()方法，而不是router.replace()方法。在SingleArticle.vue文章詳情頁中為"返回"按鈕綁定back()方法，當(dāng)點(diǎn)擊"返回"按鈕時(shí)，通過router.go(-1)方法返回上一頁面。

<scriptsetup>

import{useRouter}from'vue-router'

constrouter=useRouter()

functionback(){

router.go(-1)

}

</script>任務(wù)6.3“就業(yè)指導(dǎo)”文章詳情頁開發(fā)【任務(wù)實(shí)施】步驟一.帶參路由規(guī)則制定在SingleArticle.vue文章詳情頁中為"返回"按鈕綁定back()方法，當(dāng)點(diǎn)擊"返回"按鈕時(shí)，通過router.go(-1)方法返回上一頁面。

<scriptsetup>

import{useRouter}from'vue-router'

constrouter=useRouter()

functionback(){

router.go(-1)

}

</script>此時(shí)我們已完成項(xiàng)目任務(wù)中的第一步驟，實(shí)現(xiàn)“就業(yè)指導(dǎo)”頁面文章列表和文章詳情頁之間的跳轉(zhuǎn)功能。接下來我們將文章列表和文章詳情頁中的數(shù)據(jù)部署到接口地址上，實(shí)現(xiàn)接口數(shù)據(jù)的相互。任務(wù)6.3“就業(yè)指導(dǎo)”文章詳情頁開發(fā)【任務(wù)實(shí)施】步驟二.文章詳情數(shù)據(jù)部署。在data.json接口數(shù)據(jù)中部署文章列表和文章詳情數(shù)據(jù)。{

//文章列表數(shù)據(jù)：

"articleList":[

{

"id":1,

"title":"初入職場，如何自我介紹？",

"introduce":"初入職場，做好個(gè)人介紹是邁向成功的第一步。",

"author":"陳曉"

}

--依據(jù)示例數(shù)據(jù)規(guī)范，自行補(bǔ)充若干數(shù)據(jù)--

],//文章詳情數(shù)據(jù)：

"article":[

{

"id":1,

"title":"初入職場，如何自我介紹？",

"content":"1、注意表情和姿態(tài)管理，微笑面對面試官，眼神專注，坐姿端正，切忌因緊張而出現(xiàn)的小動(dòng)作，要凸顯熱情，展現(xiàn)個(gè)人魅力。2、自我介紹時(shí)最好直切主題，介紹自己的成就，注意與應(yīng)聘職位相關(guān)，突出優(yōu)勢，特長，可運(yùn)用STAR法則進(jìn)行陳述。（即經(jīng)歷發(fā)生時(shí)當(dāng)時(shí)的情況是怎樣的？當(dāng)時(shí)的任務(wù)是什么？采取了什么措施？結(jié)果是怎樣？正確應(yīng)用STAR法則，能使自己的表述更有條理性，更抓人眼球）"

}

--依據(jù)示例數(shù)據(jù)規(guī)范，自行補(bǔ)充若干數(shù)據(jù)--

]

}任務(wù)6.3“就業(yè)指導(dǎo)”文章詳情頁開發(fā)【任務(wù)實(shí)施】步驟二.文章詳情數(shù)據(jù)部署。其中“articleList”節(jié)點(diǎn)用于放置文章列表數(shù)據(jù)，“article”節(jié)點(diǎn)用于放置文章詳情數(shù)據(jù)。使用“npmrunbuildData”命令啟動(dòng)數(shù)據(jù)接口。在pages目錄下的Articles.vue組件中使用axios獲取articleList接口中的數(shù)據(jù)。

<scriptsetup>

import{reactive,getCurrentInstance}from'vue'

constcurrentInstance=getCurrentInstance()

const{$axios}=currentInstance.appContext.config.globalProperties

letarticleList=reactive({

content:[]

})

//獲取接口中articleList節(jié)點(diǎn)下的數(shù)據(jù)

functiongetArticle(){

$axios.get('http://localhost:3000/articleList/')

.then((response)=>{

if(response.status==200){

articleList.content=response.data

}

})

}

getArticle()

</script>任務(wù)6.3“就業(yè)指導(dǎo)”文章詳情頁開發(fā)【任務(wù)實(shí)施】步驟二.文章詳情數(shù)據(jù)部署。在Articles.vue中將articleList數(shù)組中的數(shù)據(jù)通過props屬性由父組件傳遞給子組件。

<router-view:articleList="articleList">

</router-view>在List.vue中接收父組件傳遞而來的接口數(shù)據(jù)并渲染至頁面中。

<template>

<div>

<divclass="list-groupps-5pe-5pt-5pb-5">

<!--文章列表--><divclass="list-group-itemlist-group-item-actiond-flexgap-3py-3"style="cursor:pointer"v-for="(item,index)inarticleList":key="item.id"v-on:click="goArticle(item)">

<divclass="d-flexgap-2w-100justify-content-between">

<div>

<h6class="mb-0">{{item.title}}</h6>

<pclass="mb-0opacity-75">{{roduce}}</p>

</div>

<smallclass="opacity-50text-nowrap">{{item.author}}

</small>

</div>

</div>

</div>

</div>

</template>任務(wù)6.3“就業(yè)指導(dǎo)”文章詳情頁開發(fā)【任務(wù)實(shí)施】步驟二.文章詳情數(shù)據(jù)部署。

<scriptsetup>

import{defineProps,toRefs}from'vue'

import{useRouter}from'vue-router'

constrouter=useRouter()

constprops=defineProps({

articleList:Array

})

const{articleList}=toRefs(props)

functiongoArticle(item){

router.push("/article/"+item.id)

}

</script>此時(shí)我們已經(jīng)使用axios獲取到數(shù)據(jù)接口articleList節(jié)點(diǎn)下的數(shù)據(jù)，并渲染至文章列表的頁面中了。接下來我們讀取文章詳情的數(shù)據(jù)并渲染至頁面中。在【SingleArticle.vue】中定義getArticle()方法，通過該方法獲取動(dòng)態(tài)路由的匹配參數(shù)，并通過該參數(shù)向數(shù)據(jù)接口獲取相應(yīng)的文章詳情數(shù)據(jù)。

<template>

<divclass="containermy-5">

<divclass="rowp-4

align-items-centerrounded-3bordershadow-lg">

<h5><av-on:click="back"

style="cursor:pointer;color:gray"><返回</a>

</h5>

<divclass="col-lg-12p-3p-lg-5pt-lg-3">

<h1class="display-4mb-4fw-boldlh-1text-center">{{articleInfo.data.title}}</h1>

<pclass="lead"style="line-height:1.8">

{{articleInfo.data.content}}

</p>

</div>

</div>

</div>

</template>任務(wù)6.3“就業(yè)指導(dǎo)”文章詳情頁開發(fā)【任務(wù)實(shí)施】步驟二.文章詳情數(shù)據(jù)部署。

<scriptsetup>

import{reactiv