《Vue 3基礎(chǔ)入門》課件 第七章 vue-router

Vue路由Contents目錄

路由的進階使用0304導(dǎo)航守衛(wèi)05

路由元信息06過渡動效07

數(shù)據(jù)捕獲08路由懶加載09滾動行為10History模式路由基礎(chǔ)01動態(tài)路由0201路由基礎(chǔ)PART路由基礎(chǔ)目前常見的前端路由方案主要有以下4種：hash模式基于錨點的原理實現(xiàn)，簡單易用history模式使用HTML5標準中的HistoryAPI通過監(jiān)聽popstate事件來對DOM對象進行操作，每次路由變化不會引起重定向memory模式在內(nèi)存中維護一個堆棧用于管理訪問歷史的方式，在早期移動端使用比較多，實現(xiàn)麻煩，問題也較多。ReactNative使用這種路由模式static模式主要用于服務(wù)端渲染（SSR），需要后端去管理路由。在HTML中使用VueRouter在使用VueRouter時需要使用一個自定義組件router-link來創(chuàng)建鏈接。VueRouter可以在不重新加載頁面的情況下更改URL、處理URL的生成及編碼，router-view組件負責(zé)控制顯示與URL對應(yīng)的組件，可以將其放置在任何位置，以適應(yīng)所需的布局<scriptsrc="/vue-router@4"></script><divid="app"><h1>HelloApp!</h1><p><!--使用router-link組件來導(dǎo)航.--><!--通過傳入'to'屬性指定鏈接.--><!--<router-link>默認會被渲染成一個'<a>'標簽--><router-linkto="/foo">GotoFoo</router-link><router-linkto="/bar">GotoBar</router-link></p><!--路由出口--><!--路由匹配到的組件將渲染在這里--><router-view></router-view></div>在JavaScript代碼中使用VueRouter在JavaScript中可以方便地使用VueRouter//0.如果使用模塊化機制編程，導(dǎo)入Vue和VueRouter，要調(diào)用Vue.use(VueRouter)//1.定義(路由)組件。//可以從其他文件import進來constFoo={template:'<div>foo</div>'}constBar={template:'<div>bar</div>'}//2.定義路由constroutes=[{path:'/foo',component:Foo},{path:'/bar',component:Bar}]//3.創(chuàng)建router實例，然后傳routes配置constrouter=VueRouter.createRouter({history:VueRouter.createWebHashHistory(),routes//相當于routes:routes})//4.創(chuàng)建和掛載根實例constapp=Vue.createApp({//options}).use(router).$mount('#app')通過注入路由器可以在任何組件內(nèi)使用路由器，通過this.$router訪問路由器或者訪問當前路由的信息//Home.vueexportdefault{computed:{username(){returnthis.$route.params.username}},methods:{goBack(){window.history.length>1?this.$router.go(-1):this.$router.push('/')}}}02動態(tài)路由PART動態(tài)路由若需將所有匹配某種模式的路由都映射到同一個組件。對于所有id不相同的用戶都用此組件來渲染，可以在VueRouter的路由路徑中使用動態(tài)路徑參數(shù)(dynamicsegment)來實現(xiàn)這一目標constUser={template:'<div>User</div>'}constrouter=VueRouter.createRouter({routes:[//動態(tài)路徑參數(shù)以冒號開頭{path:'/user/:id',component:User}]})通過上述函數(shù)，用戶在URL中輸入路徑/user/foo和/user/bar都將被映射到同一個路由，在VueRouter中，使用冒號“:”標記路徑參數(shù)，在匹配到路由時，參數(shù)值會被設(shè)置到this.$route.params中可以在每個組件內(nèi)使用，可以利用這個特性更新User組件的模板，constUser={template:'<div>User{{$route.params.id}}</div>'}在一個路由中設(shè)置多個路徑參數(shù)，對應(yīng)的值都會被設(shè)置到$route.params中。除了$route.params外，$route對象還提供了其他有用的信息，例如$route.query（如果URL中有查詢參數(shù)）、$route.hash等。參數(shù)響應(yīng)當使用帶有參數(shù)的路由時相同的組件實例將被重復(fù)使用，兩個路由渲染同一個組件，相較于銷毀再創(chuàng)建，復(fù)用則更加高效，但組件的鉤子函數(shù)不會被調(diào)用。若要對同一個組件中參數(shù)的變化作出響應(yīng)，開發(fā)者可以觀測$route對象上的任意屬性如$route.params，也可以使用beforeRouteUpdate導(dǎo)航守衛(wèi)來取消導(dǎo)航constUser={template:'...',created(){this.$watch(()=>this.$route.params,(toParams,previousParams)=>{//對路由變化作出響應(yīng)})},}constUser={template:'...',asyncbeforeRouteUpdate(to,from){//對路由變化作出響應(yīng)this.userData=awaitfetchUser(to.params.id)},}捕獲所有路由常規(guī)參數(shù)只匹配URL片段之間的字符，使用“/”分隔，若匹配任意路徑可使用自定義的路徑參數(shù)正則表達式constroutes=[//將匹配所有內(nèi)容并將其放在$route.params.pathMatch下{path:'/:pathMatch(.*)*',name:'NotFound',component:NotFound},//將匹配以/user-開頭的所有內(nèi)容，并將其放在$route.params.afterUser下{path:'/user-:afterUser(.*)',component:UserGeneric},]在路徑參數(shù)后的括號中加入了一個自定義的正則表達式，并將pathMatch參數(shù)標記為可選可重復(fù)。這樣做是為了讓開發(fā)者可以通過將路徑拆分成一個數(shù)組直接導(dǎo)航到路由this.$router.push({name:'NotFound',//保留當前路徑并刪除第一個字符params:{pathMatch:this.$route.path.substring(1).split('/')},//保留現(xiàn)有的查詢和hash值query:this.$route.query,hash:this.$route.hash,})03路由進階使用PART嵌套路由實際應(yīng)用中的界面通常由多個嵌套的組件組成，URL中的動態(tài)路徑也按照一定的結(jié)構(gòu)對應(yīng)于嵌套的組件層次結(jié)構(gòu)，路由結(jié)構(gòu)如圖所示嵌套路由通過vue-router的嵌套路由配置，可以簡單地表示出應(yīng)用程序中的多層嵌套組件關(guān)系<divid="app"><router-view></router-view></div>constUser={template:'<div>User{{$route.params.id}}</div>',}//這些都會傳遞給'createRouter'constroutes=[{path:'/user/:id',component:User}]這里的<router-view>是一個頂層的router-view，用來渲染頂層路由匹配的組件。一個被渲染的組件也可以嵌套<router-view>，例如在User組件的模板內(nèi)添加一個<router-view>，將組件渲染到嵌套的router-view中，并在路由中配置子路由(children)的constUser={template:'<divclass="user"><h2>User{{$route.params.id}}</h2><router-view></router-view></div>',}constroutes=[{path:'/user/:id',component:User,children:[{//當/user/:id/profile匹配成功//UserProfile將被渲染到User的<router-view>內(nèi)部path:'profile',component:UserProfile,},{//當/user/:id/posts匹配成功//UserPosts將被渲染到User的<router-view>內(nèi)部path:'posts',component:UserPosts,},],},]編程式導(dǎo)航除了使用<router-link>創(chuàng)建a標簽來定義導(dǎo)航鏈接，還可以通過調(diào)用router實例的各種函數(shù)編寫代碼來實現(xiàn)導(dǎo)航。1.router.push()函數(shù)2.router.replace()3.router.go()命名路由有時候通過一個名稱來標識一個路由更加方便，特別是在鏈接一個路由或執(zhí)行一些跳轉(zhuǎn)時。在創(chuàng)建Router實例并配置routes時，可以為某個路由設(shè)置名稱，要鏈接到一個命名路由，可以給router-link的to屬性傳一個對象constrouter=newVueRouter({routes:[{path:'/user/:userId',name:'user',component:User}]})<router-link:to="{name:'user',params:{userId:123}}">User</router-link>有時候需要同時展示多個同級視圖，而不是嵌套視圖，例如創(chuàng)建一個布局，有sidebar（側(cè)導(dǎo)航）和main（主內(nèi)容）兩個視圖，這時可以使用命名視圖。開發(fā)者可以在界面中擁有多個單獨命名的視圖，而不是只有一個默認的router-view，如果沒有為router-view設(shè)置名稱，則默認名稱為default<router-viewclass="viewone"></router-view><router-viewclass="viewtwo"name="a"></router-view><router-viewclass="viewthree"name="b"></router-view>components配置項constrouter=newVueRouter({routes:[{path:'/',components:{default:Foo,a:Bar,b:Baz}}]})重定向與別名1.重定向重定向也可以在routes配置中完成，重定向的目標也可以是一個命名路由，甚至是一個函數(shù)，動態(tài)返回重定向目標，constroutes=[{path:'/home',redirect:'/'}]constroutes=[{path:'/home',redirect:{name:'homepage'}}]constroutes=[{///search/screens->/search?q=screenspath:'/search/:searchText',redirect:to=>{//函數(shù)接收目標路由作為參數(shù)//return重定向的字符串路徑/路徑對象return{path:'/search',query:{q:to.params.searchText}}},},{path:'/search',//...},]2.相對重定向constroutes=[{//將總是把/users/123/posts重定向到/users/123/profilepath:'/users/:id/posts',redirect:to=>{//該函數(shù)接收目標路由作為參數(shù)return'profile'},},]3.別名constroutes=[{path:'/users',component:UsersLayout,children:[//為這3個URL呈現(xiàn)UserList//-/users//-/users/list//-/people{path:'',component:UserList,alias:['/people','list']},],},]路由組件參數(shù)傳遞在組件中使用$route會與路由緊密耦合，這會限制組件的靈活性，可以通過props配置來解耦，這允許在任何地方使用該組件，使該組件更容易重用和測試constUser={template:'<div>User{{$route.params.id}}</div>'}constroutes=[{path:'/user/:id',component:User}]constUser={//請確保添加一個與路由參數(shù)完全相同的屬性名props:['id'],template:'<div>User{{id}}</div>'}constroutes=[{path:'/user/:id',component:User,props:true}]props配置有以下幾種方式1.布爾模式當props設(shè)置為true時，route.params將被設(shè)置為組件的props2.命名視圖對于有命名視圖的路由，必須為每個命名視圖定義props配置constroutes=[{path:'/user/:id',components:{default:User,sidebar:Sidebar},props:{default:true,sidebar:false}}]3.對象模式constroutes=[{path:'/promotion/from-newsletter',component:Promotion,props:{newsletterPopup:false}}]4.函數(shù)模式constroutes=[{path:'/search',component:SearchUser,props:route=>({query:route.query.q})}]04History模式PARTHTML5HistoryAPIDOM中的window對象通過history對象提供了對瀏覽器歷史的訪問，它暴露了很多有用的函數(shù)和屬性，允許開發(fā)者在用戶瀏覽歷史中向前和向后跳轉(zhuǎn)，從HTML5開始，還提供了對history棧中內(nèi)容的操作1.在history中跳轉(zhuǎn)2.pushState()函數(shù)和replaceState()函數(shù)后端配置如果需要將項目部署在一個子目錄下，應(yīng)該使用VueCLI中的publicPath選項以及相關(guān)的路由器基礎(chǔ)屬性，然后調(diào)整Web服務(wù)器根目錄將其替換為子目錄（例如用RewriteBase/name-of-your-subfolder/替換RewriteBase/）#Apache配置代碼<IfModulemod_rewrite.c>RewriteEngineOnRewriteBase/RewriteRule^index\.html$-[L]RewriteCond%{REQUEST_FILENAME}!-fRewriteCond%{REQUEST_FILENAME}!-dRewriteRule./index.html[L]</IfModule>

#Nginx配置代碼location/{try_files$uri$uri//index.html;}Node.js中的路由功能代碼如下：consthttp=require('http')constfs=require('fs')consthttpPort=80http.createServer((req,res)=>{fs.readFile('index.html','utf-8',(err,content)=>{if(err){console.log('Wecannotopen"index.html"file.')}

res.writeHead(200,{'Content-Type':'text/html;charset=utf-8'})

res.end(content)})}).listen(httpPort,()=>{console.log('Serverlisteningon:http://localhost:%s',httpPort)})05導(dǎo)航守衛(wèi)PART全局守衛(wèi)開發(fā)者可以使用router.beforeEach注冊一個全局前置守衛(wèi)函數(shù)constrouter=newVueRouter({...})

router.beforeEach((to,from,next)=>{//...})router.afterEach((to,from)=>{//...})當一個導(dǎo)航被觸發(fā)時，全局前置守衛(wèi)函數(shù)按照創(chuàng)建順序調(diào)用。守衛(wèi)函數(shù)是異步解析執(zhí)行的，此時導(dǎo)航在所有守衛(wèi)函數(shù)執(zhí)行完之前一直處于等待中，每個守衛(wèi)函數(shù)接收以下3個參數(shù)。（1）to:Route對象，即將要進入的目標路由對象。（2）from:Route對象，當前導(dǎo)航正要離開的路由對象。（3）next:Function函數(shù)，必須調(diào)用該函數(shù)來通知守衛(wèi)函數(shù)執(zhí)行完畢，執(zhí)行效果依賴next函數(shù)的調(diào)用參數(shù)。也可以注冊全局后置守衛(wèi)函數(shù)，該函數(shù)不會接受next函數(shù)也不會改變導(dǎo)航本身路由獨享守衛(wèi)和組件內(nèi)守衛(wèi)在路由配置上直接定義beforeEnter守衛(wèi)constrouter=newVueRouter({routes:[{path:'/foo',component:Foo,beforeEnter:(to,from,next)=>{//...}}]})可以在路由組件內(nèi)直接定義以下3個路由導(dǎo)航守衛(wèi)。（1）beforeRouteEnter。（2）beforeRouteUpdate。（3）beforeRouteLeave示例constFoo={template:'...',beforeRouteEnter(to,from,next){//渲染該組件前調(diào)用},beforeRouteUpdate(to,from,next){//在當前路由改變且組件被復(fù)用時調(diào)用},beforeRouteLeave(to,from,next){//導(dǎo)航離開組件路由時調(diào)用}}導(dǎo)航解析流程（1）導(dǎo)航被觸發(fā)。（2）在失活的組件里調(diào)用beforeRouteLeave守衛(wèi)。（3）調(diào)用全局的beforeEach守衛(wèi)。（4）在重用的組件里調(diào)用beforeRouteUpdate守衛(wèi)(需vue-router2.2版本以上)。（5）在路由配置里調(diào)用beforeEnter守衛(wèi)。（6）解析異步路由組件。（7）在被激活的組件里調(diào)用beforeRouteEnter守衛(wèi)。（8）調(diào)用全局的beforeResolve守衛(wèi)(需vue-router2.5版本以上)。（9）導(dǎo)航被確認。（10）調(diào)用全局的afterEach()鉤子函數(shù)。（11）觸發(fā)DOM樹結(jié)構(gòu)更新。（12）調(diào)用beforeRouteEnter守衛(wèi)中傳遞給next的回調(diào)函數(shù)，已創(chuàng)建好的組件實例會作為回調(diào)函數(shù)的參數(shù)傳遞。06路由元信息PART路由元信息定義路由的時候可以配置meta字段constrouter=newVueRouter({routes:[{path:'/foo',component:Foo,children:[{path:'bar',component:Bar,//元信息meta:{requiresAuth:true}}]}]})下面的例子展示了如何在全局導(dǎo)航守衛(wèi)中檢查元信息：outer.beforeEach((to,from,next)=>{if(to.matched.some(record=>record.meta.requiresAuth)){//判斷是否已經(jīng)登錄//如果沒有登錄，跳轉(zhuǎn)到登錄頁面if(!auth.loggedIn()){next({path:'/login',query:{redirect:to.fullPath}})}else{next()}}else{next()//確保一定要調(diào)用next()函數(shù)}})07過渡動效PART單路由過渡在各個路由組件內(nèi)部使用<transition>標簽，并設(shè)置不同的nameconstFoo={template:'<transitionname="slide"><divclass="foo">...</div></transition>'}constBar={template:'<transitionname="fade"><divclass="bar">...</div></transition>'}或者采用下面這種方式：constroutes=[{path:'/custom-transition',component:PanelLeft,meta:{transition:'slide-left'},},{path:'/other-transition',component:PanelRight,meta:{transition:'slide-right'},}]<router-viewv-slot="{Component,route}"><!--使用任何自定義過渡和回退到'fade'--><transition:name="route.meta.transition||'fade'"><component:is="Component"/></transition></router-view><router-view>是基本的動態(tài)組件，可以用<transition>組件給它添加一些過渡效果，代碼如下：<transition><router-view></router-view></transition>路由動態(tài)過渡基于當前路由與目標路由的變化關(guān)系，動態(tài)設(shè)置過渡效果<!--使用動態(tài)的transitionname--><transition:name="transitionName"><router-view></router-view></transition>//在父組件內(nèi)使用$route規(guī)則決定使用哪種過渡watch:{'$route'(to,from){consttoDepth=to.path.split('/').lengthconstfromDepth=from.path.split('/').lengththis.transitionName=toDepth<fromDepth?'slide-right':'slide-left'}}08數(shù)據(jù)獲取PART數(shù)據(jù)獲取1.導(dǎo)航完成后獲取數(shù)據(jù)使用該方式，系統(tǒng)會立即進行導(dǎo)航和組件渲染，并在組件的created()鉤子函數(shù)中獲取數(shù)據(jù)，這使得開發(fā)人員有機會在數(shù)據(jù)獲取期間展示加載狀態(tài)，并可以在不同的視圖中顯示不同的加載狀態(tài)。假設(shè)有一個“文章（post）"組件，需要基于$route.params.id獲取文章數(shù)據(jù)<template><divclass="post"><divv-if="loading"class="loading">Loading...</div>

<divv-if="error"class="error">{{error}}</div>

<divv-if="post"class="content"><h2>{{post.title}}</h2><p>{{post.body}}</p></div></div></template>exportdefault{data(){return{loading:false,post:null,error:null}},created(){this.fetchData()//組件創(chuàng)建完后獲取數(shù)據(jù)},watch:{'$route':'fetchData’//如果路由有變化，會再次執(zhí)行該函數(shù)},methods:{fetchData(){this.error=this.post=nullthis.loading=true//請自行替換getPost函數(shù)中獲取數(shù)據(jù)的方式getPost(this.$route.params.id,(err,post)=>{this.loading=falseif(err){this.error=err.toString()}else{this.post=post}})}}}數(shù)據(jù)獲取2.在導(dǎo)航完成前獲取數(shù)據(jù)采用這種方式，可以在導(dǎo)航進入新路由之前獲取數(shù)據(jù)，開發(fā)人員可以在接下來的組件的beforeRouteEnter守衛(wèi)中獲取數(shù)據(jù)，當數(shù)據(jù)獲取成功后只需調(diào)用next()函數(shù)即可exportdefault{data(){return{post:null,error:null}},beforeRouteEnter(to,from,next){getPost(to.params.id,(err,post)=>{next(vm=>vm.setData(err,post))})},//路由改變前，組件就已經(jīng)渲染完畢beforeRouteUpdate(to,from,next){this.post=nullgetPost(to.params.id,(err,post)=>{this.setData(err,post)next()})},methods:{setData(err,post){if(err){t