1. 路由路由是一個比較廣義和抽象的概念,路由的本質(zhì)就對應(yīng)關(guān)系。 在開發(fā)中,路由分為前端路由和后端路由。 1.1 路由的基本概念與原理1.1.1 后端路由概念:根據(jù)不同的用戶URL請求,返回不同的內(nèi)容 本質(zhì):URL請求地址與服務(wù)器資源之間的對應(yīng)關(guān)系 后端渲染(存在性能問題) Ajax前端渲染(前端渲染提高性能,但是不支持瀏覽器的前進后退操作) SPA(Single Page Application)單頁面應(yīng)用程序:整個網(wǎng)站只有一個頁面,內(nèi)容的變化通過Ajax局部更新實現(xiàn)、同時支持瀏覽器地址欄的前進和后退操作 SPA實現(xiàn)原理之一:基于URL地址的hash(hash的變化會導(dǎo)致瀏覽器記錄訪問歷史的變化、但是hash的變化不會觸發(fā)新的URL請求) 在實現(xiàn)SPA過程中,最核心的技術(shù)點就是前端路由 1.1.2 前端路由概念:根據(jù)不同的用戶事件,顯示不同的頁面內(nèi)容 本質(zhì):用戶事件與事件處理函數(shù)之間的對應(yīng)關(guān)系 1.1.3 實現(xiàn)簡易前端路由基于URL中的hash實現(xiàn)(點擊菜單的時候改變URL的hash,根據(jù)hash的變化控制組件的切換) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <!-- 導(dǎo)入 vue 文件 --> <script src="./lib/vue_2.5.22.js"></script> </head> <body> <!-- 被 vue 實例控制的 div 區(qū)域 --> <div id="app"> <!-- 切換組件的超鏈接 --> <a href="#/zhuye">主頁</a> <a href="#/keji">科技</a> <a href="#/caijing">財經(jīng)</a> <a href="#/yule">娛樂</a> <!-- 根據(jù) :is 屬性指定的組件名稱,把對應(yīng)的組件渲染到 component 標(biāo)簽所在的位置 --> <!-- 可以把 component 標(biāo)簽當(dāng)做是【組件的占位符】 --> <component :is="comName"></component> </div> <script> // #region 定義需要被切換的 4 個組件 // 主頁組件 const zhuye = { template: '<h1>主頁信息</h1>' } // 科技組件 const keji = { template: '<h1>科技信息</h1>' } // 財經(jīng)組件 const caijing = { template: '<h1>財經(jīng)信息</h1>' } // 娛樂組件 const yule = { template: '<h1>娛樂信息</h1>' } // #endregion // #region vue 實例對象 const vm = new Vue({ el: '#app', data: { comName: 'zhuye' }, // 注冊私有組件 components: { zhuye, keji, caijing, yule } }) // #endregion // 監(jiān)聽 window 的 onhashchange 事件,根據(jù)獲取到的最新的 hash 值,切換要顯示的組件的名稱 window.onhashchange = function() { // 通過 location.hash 獲取到最新的 hash 值 console.log(location.hash); switch(location.hash.slice(1)){ case '/zhuye': vm.comName = 'zhuye' break case '/keji': vm.comName = 'keji' break case '/caijing': vm.comName = 'caijing' break case '/yule': vm.comName = 'yule' break } } </script> </body> </html> 實現(xiàn)效果:
點擊上面的標(biāo)簽,下面的信息就會改變。 1.2 Vue RouterVue Router(官網(wǎng):https://router./zh/)是 Vue.js 官方的路由管理器。 Vue Router 包含的功能有: 支持HTML5歷史模式或hash模式 支持嵌套路由 支持路由參數(shù) 支持編程式路由 支持命名路由 1.2.1 vue-router的基本使用1. 引入相關(guān)的庫文件 2. 添加路由鏈接 3. 添加路由填充位 4. 定義路由組件 5. 配置路由規(guī)則并創(chuàng)建路由實例 6. 把路由掛載到Vue根實例中 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <!-- 導(dǎo)入 vue 文件,為全局 window 對象掛載 Vue 構(gòu)造函數(shù) --> <script src="./lib/vue_2.5.22.js"></script> <!-- 導(dǎo)入 vue-router 文件,為全局 window 對象掛載 VueRouter 構(gòu)造函數(shù) --> <script src="./lib/vue-router_3.0.2.js"></script> </head> <body> <!-- 被 vm 實例所控制的區(qū)域 --> <div id="app"> <!-- router-link 是 vue 中提供的標(biāo)簽,默認會被渲染為 a 標(biāo)簽 --> <!-- to 屬性默認會被渲染為 href 屬性 --> <!-- to 屬性的值默認會被渲染為 # 開頭的 hash 地址 --> <router-link to="/user">User</router-link> <router-link to="/register">Register</router-link> <!-- 路由填充位(也叫做路由占位符) --> <!-- 將來通過路由規(guī)則匹配到的組件,將會被渲染到 router-view 所在的位置 --> <router-view></router-view> </div> <script> // 定義路由組件 const User = { template: '<h1>User 組件</h1>' } const Register = { template: '<h1>Register 組件</h1>' } // 創(chuàng)建路由實例對象 const router = new VueRouter({ // routes 所有的路由規(guī)則 routes: [ // 每個路由規(guī)則都是一個配置對象,其中至少包含 path 和 component 兩個屬性: // path 表示當(dāng)前路由規(guī)則匹配的 hash 地址 // component 表示當(dāng)前路由規(guī)則對應(yīng)要展示的組件 { path: '/user', component: User }, { path: '/register', component: Register } ] }) // 創(chuàng)建 vm 實例對象 const vm = new Vue({ // 指定控制的區(qū)域 el: '#app', data: {}, // 為了能夠讓路由規(guī)則生效,必須把路由對象掛載到 vue 實例對象上 // router: router router }) </script> </body> </html> 執(zhí)行效果:
1.2.2 路由重定向路由重定向指的是:用戶在訪問地址A的時候,強制用戶跳轉(zhuǎn)到地址C,從而展示特定的組件頁面; 通過路由規(guī)則的redirect屬性,指定一個新的路由地址,可以很方便地設(shè)置路由的重定向。 這個非常簡單,就把上面的代碼修改一下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <!-- 導(dǎo)入 vue 文件,為全局 window 對象掛載 Vue 構(gòu)造函數(shù) --> <script src="./lib/vue_2.5.22.js"></script> <!-- 導(dǎo)入 vue-router 文件,為全局 window 對象掛載 VueRouter 構(gòu)造函數(shù) --> <script src="./lib/vue-router_3.0.2.js"></script> </head> <body> <!-- 被 vm 實例所控制的區(qū)域 --> <div id="app"> <!-- router-link 是 vue 中提供的標(biāo)簽,默認會被渲染為 a 標(biāo)簽 --> <!-- to 屬性默認會被渲染為 href 屬性 --> <!-- to 屬性的值默認會被渲染為 # 開頭的 hash 地址 --> <router-link to="/user">User</router-link> <router-link to="/register">Register</router-link> <!-- 路由填充位(也叫做路由占位符) --> <!-- 將來通過路由規(guī)則匹配到的組件,將會被渲染到 router-view 所在的位置 --> <router-view></router-view> </div> <script> // 定義路由組件 const User = { template: '<h1>User 組件</h1>' } const Register = { template: '<h1>Register 組件</h1>' } // 創(chuàng)建路由實例對象 const router = new VueRouter({ // routes 所有的路由規(guī)則 routes: [ //path 表示需要被重定向的原地址,redirect 表示將要被重定向到的新地址 { path: '/', redirect: '/user'}, // 每個路由規(guī)則都是一個配置對象,其中至少包含 path 和 component 兩個屬性: // path 表示當(dāng)前路由規(guī)則匹配的 hash 地址 // component 表示當(dāng)前路由規(guī)則對應(yīng)要展示的組件 { path: '/user', component: User }, { path: '/register', component: Register } ] }) // 創(chuàng)建 vm 實例對象 const vm = new Vue({ // 指定控制的區(qū)域 el: '#app', data: {}, // 為了能夠讓路由規(guī)則生效,必須把路由對象掛載到 vue 實例對象上 // router: router router }) </script> </body> </html> 執(zhí)行效果:
一打開默認顯示user組件。 1.3 vue-router嵌套路由<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <!-- 導(dǎo)入 vue 文件 --> <script src="./lib/vue_2.5.22.js"></script> <script src="./lib/vue-router_3.0.2.js"></script> </head> <body> <!-- 被 vm 實例所控制的區(qū)域 --> <div id="app"> <router-link to="/user">User</router-link> <router-link to="/register">Register</router-link> <!-- 路由占位符 --> <router-view></router-view> </div> <script> const User = { template: '<h1>User 組件</h1>' } const Register = { template: `<div> <h1>Register 組件</h1> <hr/> <!-- 子路由鏈接 --> <router-link to="/register/tab1">tab1</router-link> <router-link to="/register/tab2">tab2</router-link> <!-- 子路由的占位符 --> <router-view /> <div>` } const Tab1 = { template: '<h3>tab1 子組件</h3>' } const Tab2 = { template: '<h3>tab2 子組件</h3>' } // 創(chuàng)建路由實例對象 const router = new VueRouter({ // 所有的路由規(guī)則 routes: [ { path: '/', redirect: '/user'}, { path: '/user', component: User }, // children 數(shù)組表示子路由規(guī)則 { path: '/register', component: Register, children: [ { path: '/register/tab1', component: Tab1 }, { path: '/register/tab2', component: Tab2 } ] } ] }) // 創(chuàng)建 vm 實例對象 const vm = new Vue({ // 指定控制的區(qū)域 el: '#app', data: {}, // 掛載路由實例對象 // router: router router }) </script> </body> </html> 執(zhí)行效果:
|
|