027_vue路由
1. 后端路由
1.1. 概念: 根據不同的用戶URL請求, 返回不同的內容。
1.2. 本質: URL請求地址與服務器資源之間的對應關系。
2. SPA(Single Page Application)
2.1. 后端渲染, 存在性能問題。
2.2. Ajax前端渲染, 提高前端渲染性能, 但是不支持瀏覽器的前進和后退操作。
2.3. SPA(Single Page Application)單頁面應用程序: 整個網站只有一個頁面, 內容的變化通過Ajax局部更新實現、同時支持瀏覽器地址欄的前進和后退。
2.4. SPA實現原理之一: 基于URL地址的hash, hash的變化會導致瀏覽器記錄訪問歷史的變化、但是hash的變化不會觸發新的URL請求。
2.5. 在實現SPA過程中, 最核心的技術點就是前端路由。
3. 前端路由
3.1. 概念: 根據不同的用戶事件, 顯示不同的頁面內容。
3.2. 本質: 用戶事件與事件處理函數之間的對應關系。
?
4. 通過window的onhashchange事件實現簡易前端路由
4.1. 基于URL中的hash實現, 點擊菜單的時候改變URL的hash, 根據hash的變化控制組件的切換。
4.2.?代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>通過window的onhashchange事件實現簡易前端路由</title></head><body><div id="app"><!-- 切換組件的超鏈接 --><a href="#/zhuye">主頁</a> <a href="#/keji">科技</a> <a href="#/caijing">財經</a><a href="#/yule">娛樂</a><!-- 根據 :is 屬性指定的組件名稱, 把對應的組件渲染到component標簽所在的位置 --><!-- 可以把component標簽當做是[組件的占位符] --><component :is="comName"></component></div><script type="text/javascript" src="vue.min.js"></script><script type="text/javascript">// 定義需要被切換的4個組件// 主頁組件const zhuye = {template: '<h1>主頁信息</h1>'};// 科技組件const keji = {template: '<h1>科技信息</h1>'};// 財經組件const caijing = {template: '<h1>財經信息</h1>'};// 娛樂組件const yule = {template: '<h1>娛樂信息</h1>'};var vm = new Vue({el: "#app",data: {comName: 'zhuye'},components: {zhuye,keji,caijing,yule}});// 監聽window的onhashchange事件, 根據獲取到的最新的hash值, 切換要顯示的組件的名稱window.onhashchange = function() {// 通過location.hash獲取到最新的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>4.3.?效果圖
5. Vue Router
5.1. Vue Router是Vue官方路由管理器。它和Vue.js的核心深度集成, 可以非常方便的用于SPA應用程序的開發。
5.2. Vue Router包含的功能:
5.2.1. 支持html5歷史模式或hash模式。
5.2.2. 支持嵌套路由。
5.2.3. 支持路由參數。
5.2.4. 支持編程式路由。
5.2.5. 支持命名路由。
6. Vue Router基本使用步驟
6.1. 引入相關的庫文件。
<!-- 導入vue文件 --> <script type="text/javascript" src="vue.min.js"></script> <!-- 導入vue-router --> <script type="text/javascript" src="vue-router_3.0.2.js"></script>6.2. 添加路由鏈接。
<!-- router-link是vue中提供的標簽, 默認會被渲染為a標簽 --> <!-- to屬性默認會被渲染為href屬性 --> <!-- to屬性的值默認會被渲染為#開頭的hash地址 --> <router-link to="/zhuye">zhuye</router-link> <router-link to="/keji">keji</router-link>6.3. 添加路由填充位。
<!-- 路由填充位, 又叫做路由占位符。將來通過路由規則匹配到的組件, 將會被渲染到router-view所在的位置。 --> <router-view></router-view>6.4. 定義路由組件。
// 定義路由組件 var zhuye = {template: '<h1>主頁信息</h1>' }; var keji = {template: '<h1>科技信息</h1>' };6.5. 配置路由規則并創建路由實例。
// 創建路由實例對象 var router = new VueRouter({// 所有的路由規則routes: [// 每個路由規則都是一個匹配對象, 其中至少包含path和component兩個屬性。// path表示當前路由規則匹配的hash地址。// component表示當前路由規則對應要展示的組件。{ path: '/zhuye', component: zhuye },{ path: '/keji', component: keji }] });6.6. 把路由掛載到Vue根實例中。
var vm = new Vue({el: "#app",// 掛載路由實例對象// router: routerrouter });6.7. 路由重定向指的是: 用戶在訪問地址A的時候, 強制用戶跳轉到地址C, 從而展示特定的組件頁面; 通過路由規則的redirect屬性, 指定一個新的路由地址, 可以很方便地設置路由重定向。
// 創建路由實例對象 var router = new VueRouter({// 所有的路由規則routes: [// 每個路由規則都是一個匹配對象, 其中至少包含path和component兩個屬性。// path表示當前路由規則匹配的hash地址。// component表示當前路由規則對應要展示的組件。// 重定向path: '/'表示原地址, redirect表示將要被重定向到的新地址。{ path: '/', redirect: '/zhuye' },{ path: '/zhuye', component: zhuye },{ path: '/keji', component: keji }] });6.8. 代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>vue-router的基本使用</title></head><body><div id="app"><!-- router-link是vue中提供的標簽, 默認會被渲染為a標簽 --><!-- to屬性默認會被渲染為href屬性 --><!-- to屬性的值默認會被渲染為#開頭的hash地址 --><router-link to="/zhuye">zhuye</router-link><router-link to="/keji">keji</router-link><!-- 路由填充位, 又叫做路由占位符。將來通過路由規則匹配到的組件, 將會被渲染到router-view所在的位置。 --><router-view></router-view></div><!-- 導入vue文件 --><script type="text/javascript" src="vue.min.js"></script><!-- 導入vue-router --><script type="text/javascript" src="vue-router_3.0.2.js"></script><script type="text/javascript">// 定義路由組件var zhuye = {template: '<h1>主頁信息</h1>'};var keji = {template: '<h1>科技信息</h1>'};// 創建路由實例對象var router = new VueRouter({// 所有的路由規則routes: [// 每個路由規則都是一個匹配對象, 其中至少包含path和component兩個屬性。// path表示當前路由規則匹配的hash地址。// component表示當前路由規則對應要展示的組件。// 重定向path: '/'表示原地址, redirect表示將要被重定向到的新地址。{ path: '/', redirect: '/zhuye' },{ path: '/zhuye', component: zhuye },{ path: '/keji', component: keji }]});var vm = new Vue({el: "#app",// 掛載路由實例對象// router: routerrouter});</script></body> </html>6.9. 效果圖
總結
- 上一篇： 026_图书管理案例
- 下一篇： 028_vue路由嵌套