vue-router的基本介紹
vue-router
什麼是路由
路由是一個網路工程裡面的術語
路由就是通過網路把資訊從源地址傳輸到目的地的活動 — 維基百科
後端路由
是url和後端邏輯的對應關係
前端路由
是url和元件的對應關係
前端路由核心就是改變url但是頁面不進行整體的重新整理
vue-router
vue-router是vue官方的路由外掛 它和vue.js是深度整合的，適合用於構建單頁面應用
官網 https://router.vuejs.org/zh/
vue是基於路由的元件的
路由用於設定訪問路徑，將路徑和元件對映起來
在vue-router的單頁面應用中，頁面的路徑改變就是組建的切換
前端路由規則
- 前端路由的核心是改變URL，但是頁面不進行整體的重新整理
- URL的hash也就是錨點(#), 本質上是改變window.location的href屬性
- 我們可以通過直接賦值location.hash來改變href, 但是頁面不發生重新整理
HTML5的history模式：pushState（本人也不是很瞭解）
history介面是HTML5新增的, 它有五種模式改變URL而不重新整理頁面
- history.pushState({},'','url')
- 將url壓入棧結構
- 棧結構的特點是先進後出
- 可以返回
- history.replaceState({},'','url')
- 替換url
- 不能返回
- history.back()
- 返回
- history.forward()
- 前進
- history.go()
- history.go(-1)等價於history.back()
- history.go(1)等價於history.forward()
單頁面應用步驟七步驟：
1、引入JS檔案(vue和Vuerouter)
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
2、使用 router-link 元件來導航
通過to屬性來指定連結
router-link預設會被渲染成一個超連結標籤
<router-link to="連結名">棒棒糖</router-link>
將路由匹配到的元件渲染到<router-view></router-view>元件裡
隨專案情況而視，可寫可不寫外層盒子
<p class="tab-content">
<router-view></router-view>
</p>
作用：通過Vue的解析，解析成a標籤 點選過後切換元件的顯示，而顯示的元件是有to屬性來控制的
const Foo = {
template: '<div><img src="/img/01.jpg" alt=""></div>'}
5、寫路由規則（每一個路由對映一個元件）
/ 這裡定義的是URL和元件的對應關係
const routes = [{
path: 'to屬性的連結名',
component:元件中的元件名
}]
const routes = [{
path: '/foo',
component: Foo
}]
6、建立router例項，傳入routes配置，也可傳入其它配置引數
const router = new VueRouter({
routes // (縮寫) 相當於 routes: routes
})
7、掛載到根例項化,通過 router 配置引數注入路由,從而讓整個應用都有路由功能
const app = new Vue({
el: '#app',
router
})
案例
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Document</title> 8 9 </head> 10 11 <body> 12 <!-- 1. 匯入vue和vue-router 13 2. 定義跳轉路徑 router-link 14 3. router-view 15 4. 寫元件 16 5. 寫路由規則 17 6. 建立路由物件 18 7. 掛載到頂級Vue例項上面去 --> 19 20 <!-- 2. 定義跳轉路徑 router-link --> 21 <div id="app"> 22 <p> 23 <router-link to="/foo">棒棒糖</router-link> 24 <router-link to="/bar">水果糖</router-link> 25 <router-link to="/girl">奶糖</router-link> 26 </p> 27 <!-- 3. router-view --> 28 <div class="tab-content"> 29 <router-view></router-view> 30 31 </div> 32 </div> 33 <!-- 1.引入JS檔案 --> 34 <script src="https://unpkg.com/vue/dist/vue.js"></script> 35 <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> 36 <script> 37 // 4. 寫元件 38 const Foo = { 39 template: '<div><img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3231173445,2581934253&fm=26&gp=0.jpg" alt=""></div>' 40 } 41 const Bar = { 42 template: '<div><img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1013445547,1049096974&fm=26&gp=0.jpg" alt=""></div>' 43 } 44 const Girl = { 45 template: '<div><img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1984603473,1171836157&fm=26&gp=0.jpg" alt=""></div>' 46 } 47 // 5. 寫路由規則 48 const routes = [{ 49 path: '/foo', 50 component: Foo 51 }, { 52 path: '/bar', 53 component: Bar 54 }, { 55 path: '/girl', 56 component: Girl 57 }] 58 // 6. 建立路由物件 59 const router = new VueRouter({ 60 routes 61 }) 62 // 7. 掛載到頂級Vue例項上面去 63 const app = new Vue({ 64 el: '#app', 65 router 66 }) 67 </script> 68 </body> 69 70 </html>
通過這個簡單的案例我們可以看出來，只要記住這七個步驟，就可以簡單的實現單頁面應用的導航元件，點選第幾個router-link元件，相對應的<router-view></router-view>元件出現對映的內容
可以在列印臺清晰明瞭的看見佈局，router-link和router-view元件之間的關係