Vue路由

時間 2019-11-29

原文原文鏈接

Vue路由

1. SPA是什麼

單頁Web應用（single page application，SPA），就是隻有一個Web頁面的應用，
是加載單個HTML頁面，並在用戶與應用程序交互時動態更新該頁面的Web應用程序

   單頁面應用程序：
     只有第一次會加載頁面, 之後的每次請求, 僅僅是獲取必要的數據.而後, 由頁面中js解析獲取的數據, 展現在頁面中
   傳統多頁面應用程序：
     對於傳統的多頁面應用程序來講, 每次請求服務器返回的都是一個完整的頁面

   優點
     減小了請求體積，加快頁面響應速度，下降了對服務器的壓力
     更好的用戶體驗，讓用戶在web app感覺native app的流暢

2. SPA實現思路和技術點

   1 ajax
   2 錨點的使用（window.location.hash #）
   3 hashchange 事件 window.addEventListener("hashchange",function () {})
   4 監聽錨點值變化的事件，根據不一樣的錨點值，請求相應的數據
   5 本來用做頁面內部進行跳轉，定位並展現相應的內容

路由思路

一、確保引入Vue.vue-router的js依賴
二、首先須要定義組件（就是展現不一樣的頁面效果）
三、須要將不一樣的組件放入一個容器中（路由集合）
四、將路由集合組裝成路由器
五、將路由掛載到Vue實例中
六、定義錨點
七、跳轉

3. 經過vue的路由可實現多視圖的單頁Web應用(基於html的SPA)

3.0 引入依賴庫

3.1 建立自定義組件，例如：Home和Abort組件

const Home = Vue.extend({});

代碼以下：

 1 <html>
 2     <head>
 3         <meta charset="utf-8">
 4         <title>vue入門案例</title>
 5         <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
 6         <script src="https://cdn.bootcss.com/vue-router/3.1.2/vue-router.js"></script>
 7     </head>
 8     <body>
 9         <div id="app">
10             <router-link to="/Home" replace>首頁</router-link>
11             <router-link to="/Abort" replace>關於本站</router-link>
12              <router-view></router-view> 
13             
14         </div>
15     </body>
16     <script type="text/javascript">
17         //建立組件
18         const Home = Vue.extend({
19             template: '<div><p>網站首頁</p><div>Me*源的博客內容</div></div>'
20         });
21 
22         const Abort = Vue.extend({
23             template: '<div><p>關於本站</p><div>博主相關信息，運營內容</div></div>'
24         });
25         //添加url與組件的映射關係(組合路由)
26         let routes = [
27             {
28             path:'/',
29             component:Home
30         },
31         {
32             path:'/Home',
33             component:Home
34         },
35         {
36             path:'/Abort',
37             component:Abort
38         },
39         ]
40         
41         //將路由的集合組合成路由器
42         const router = new VueRouter({routes})
43         
44 
45         new Vue({
46             el: "#app",
47             router,
48             data: {
49                 msg: 'hello Vue!!'
50             }
51         })
52     </script>
53 
54 </html>