Vue.js教程-Vue-router
- 路由
- 什么是路由
- 后端路由階段
- 前端路由階段
- url的兩種模式
- hash
- history
- Vue-router
- 介紹
- 安裝Vue-router
- 使用router
- 路由跳轉
- 嵌套路由
- router與route的區別
- 總結
路由
什么是路由
- 路由是通過互聯的網把資訊從源地址傳輸到目的地址的活動，
- 路由中有路由表(映射表)，決定了資料的指向，
- 路由經常發生在第三層(網路層)，而與它經常做比較的是橋接，橋接是發生在第二層(資料鏈路層)，
后端路由階段
- 使用服務器直接渲染對應的HTML頁面，并回傳給客戶端進行顯示，
- 每次在地址欄中切換url時都會向服務器發送請求，隨后后臺將拼接好的html頁面回傳到前端，也就意味著重繪界面，每次請求服務器都會交給一個正則對應的Controller進行處理，
- 后端渲染好的頁面不需要單獨加載任何的js和css，瀏覽器可以直接展示，
- 缺點：
- 如果網速不夠的話，可能出現白屏，也就是對應頁面沒有重繪出來，后端路由階段的特點是，html和資料的拼接都由服務器完成，所以后端的壓力非常大，
- 有可能整個頁面也由后端人員來寫，作業量特別大，維護也需要后端來做，那要前端開發人員有啥用，
- 前端開發人員需要使用PHP或者Java等語言撰寫頁面代碼，
- 這種情況下html和資料經常混在一起，開發的時候會出現后端人員和前端人員在各自開發中撰寫了相同的邏輯函式，導致沖突；維護的時候則需要前后端一起維護，成本太高了，
- 以后的文章會講一下為什么JSP+Servlet被時代拋棄了，
前端路由階段
- 后端路由階段對后端開發人員極為不友好，作業量太大，隨著Ajax的出現，開始了前后端分離的階段，只需要通過Ajax進行資料傳遞，在前端使用JavaScript或TypeScript把資料渲染到頁面進行展示，
- Ajax讓前后端的職責變得互不干預，只需要一起確定介面就能各自進行開發，前端負責邏輯互動和可視化上，后端負責資料處理，
- 在維護時哪里出問題了也能快速找到對應的模塊和相應開發人員，
- ==單頁面富應用：==其實就是在前后端分離的基礎上加了前端路由，前端路由的功能就是改變url時重繪對應的組件，而不是頁面的整體重繪，
url的兩種模式
hash
- hash就是錨點(#)，改變了href的內容，但實際上我們發現，很少有路徑里存在==#==，說明這種方式并不常用，
- 可以通過
location.href來對href進行賦值，這樣可以達到改變url但不重繪頁面， - 例子：
localhost:8080/#/Home
history
- 例子：
localhost:8080 history.pushState({},'','/Home')：例子變成localhost:8080/Homehistory.replaceState({},'','/My')：上一個方法中的url變成localhost:8080/My，就是將當前的url路徑替換，history.go()：history.go(-1)=history.back()，history.go(1)=history.forward()，這兩個方法就是前進后退，
Vue-router
介紹
- Vue-router官方介紹
- vue-router是Vue的官方路由插件，在Vue中，頁面路徑的改變就是組件的切換重繪，讓路徑和組件形成一種映射，
安裝Vue-router
- 如果初始化專案時沒有選擇安裝vue-router，那么后期如果需要使用路由該怎么安裝呢？在VSCode的終端里輸入
npm install vue-router --save，等待安裝完即可， - 在等待安裝的程序中在src檔案夾下創建index.js檔案，目的是撰寫路由相關配置和把url與路徑形成映射，
- 上圖中的router的mode選擇history，因為路徑好看呀！
- 最后在main.js里添加，添加后的圖：
使用router
- 我們需要在上圖中的
const routes = []里面添加router物件：
- path代表著url，component代表這個url下的組件，切換url時顯示的就是這個component，component:后面加的是引入的組件名，
- ==例子：==第四行使用箭頭函式引入對應的組件，routes陣列中的兩個router物件，第一個的router物件的功能是進行重定向，當運行程式時，如果默認的url是空，那么就會重定向到redirect后的url中，第二個router物件就是正常書寫的，
- 最后，使用路由，在APP.vue中使用
<router-view></router-view>
- 這樣就能顯示出Home的內容，
路由跳轉
- 使用
this.$router.push('url')，url必須是在index.js中存在于router物件的path，切記這里是router而不是route，
嵌套路由
- router物件中有一個屬性是
children，它是陣列，陣列里存的也是router物件，使用方法與上面寫的一樣的，如圖：
router與route的區別
- 在上面使用路由跳轉的時候我說了切記使用$router，那么它們有什么區別呢？？？
- $router為VueRouter實體，想要導航到不同URL就用這個，
- $route為當前router跳轉物件里面可以獲取name、path、query、params等，
總結
- 這里面僅介紹了基礎知識，例如導航守衛等高級一點的基礎功能這里沒有寫，等以后寫專案教程時再給大家講，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/164595.html
標籤：其他