Vue-Router

2.1前端路由與後端路由區別

• 後端路由：相似 jsp（java）/node.js 後端來判斷跳轉到哪一個頁面

1. 前端每一個頁面都已經寫好1.html 2.html 
2. 後端按照邏輯進行重定向跳轉

• 前端路由：相似vue-router

1. 同一個連接
   • 例如 localhost:8080
   • localhost:8080/home
   • localhost:8080/me

   會按照後面的 "/" "/home" "/me"進行解析，從而從打包好的js中獲取須要的js/css等資源

2. 腳手架會將全部的代碼進行壓縮打包到一個js中，按照不一樣的路徑進行選擇所對應的資源（js/css等）

2.2 hash與history區別

• hash實現【可回退/難看】

1. 前端的路由和後端的路由在實現技術上不同，可是原理都是同樣的。在 HTML5 的 history API 出現以前，前端的路由都是經過 hash 來實現的，hash 能兼容低版本的瀏覽器。若是咱們把上面例子中提到的 3 個頁面用 hash 來實現的話，它的 URI 規則中須要帶上 #。
2. hash值的改變，都會在瀏覽器的訪問歷史中增長一個記錄。所以咱們能經過瀏覽器的回退、前進按鈕控制hash的切換。

1 http://10.0.0.1/
2 http://10.0.0.1/#/about
3 http://10.0.0.1/#/concat

 

• history API實現

1. 主要的兩個API history.pushState()和history.repalceState()
   
   • 　　其中push可回退
   •        replace不可回退
2. 相比hash更美觀

1 http://10.0.0.1/
2 http://10.0.0.1/about
3 http://10.0.0.1/concat

 

 

2.3路由基本配置

• 安裝Vue-router

1 npm install vue-router

 

• 導入vue和router模塊 並使用

1 import Vue from 'vue'
2 import VueRouter from 'vue-router'
3 
4 Vue.use(VueRouter)

• 建立路由對象【新建router實例對象】
• 懶加載：當打包構建應用時，JavaScript 包會變得很是大，影響頁面加載。若是咱們能把不一樣路由對應的組件分割成不一樣的代碼塊，而後當路由被訪問的時候才加載對應組件，這樣就更加高效了。

 1 //路由懶加載
 2 const Home = () => import('../views/home/Home.vue')
 3 const Category = () => import('../views/category/Category.vue')
 4 const Me = () => import('../views/me/Me.vue')
 5 
 6 
 7 //2.建立路由對象 
 8 const routes = [
 9     {
10         path:'',
11         redirect:'/home'
12     },
13     {
14         path:'/home',
15         component:Home
16     },
17     {
18         path:'/me',
19         component:Me
20     },
21     {
22         path:'/category',
23         component:Category
24     }
25     
26 ]
27 const router = new VueRouter({
28     routes : routes,
29     mode : 'history'
30 })

 

• 導出路由

1 //導出路由
2 export default router

 

• 在須要使用路由的頁面 使用router-view
  
  • 　此處取app.vue文件做爲示例 當加入<router-view></router-view>即表明前端路由生效

 1 <template>
 2     <div id="app">
 3         <router-view></router-view>
 4         <maintabbar></maintabbar>
 5     </div>
 6 </template>
 7 
 8 <script>
 9 
10 import maintabbar from './components/tabbar/maintabbar.vue'
11     export default {
12         name: 'App',
13         components: {
14             maintabbar: maintabbar
15         }
16     }
17 </script>
18 <style>
19     @import url("assets/css/base.css");
20 </style>

 

注意點：

• 當操做默認路由時 即直接訪問localhost:8080/ 應用 redirect重定向
• 建立實例時mode:history便可使用history【上方有和hash區別】

2.4動態路由（傳參）

• 可只傳單參 /user/:id    接收單個參數
• 也可傳遞多個參數　　接收對象參數

1 //修改路由配置
2    {
3      path: '/describe/:id',
4      name: 'Describe',
5      component: Describe
6    }

 在目標路徑下接收參數

this.$route.params.id

 在目標路徑下接受多個對象

1 this.$route.query

 2.5嵌套路由

• 路由配置修改【children關鍵詞】

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User,
      children: [
        {
          // 當 /user/:id/profile 匹配成功，
          // UserProfile 會被渲染在 User 的 <router-view> 中
          path: 'profile',
          component: UserProfile
        },
        {
          // 當 /user/:id/posts 匹配成功
          // UserPosts 會被渲染在 User 的 <router-view> 中
          path: 'posts',
          component: UserPosts
        }
      ]
    }
  ]
})

 2.6導航守衛

• 全局首位
  • 　　全局前置守衛

    1 const router = new VueRouter({ ... })
    2 
    3 router.beforeEach((to, from, next) => {
    4    //。。
    5    next() 
    6 })

  • 　　全局後置守衛(無next)

    1 router.afterEach((to, from) => {
    2   // ...
    3 })

 

• • 每一個守衛方法接收三個參數：

    • 　　　　to: Route: 即將要進入的目標 路由對象

    • 　　　　from: Route: 當前導航正要離開的路由

    • 　　　　next: Function: 必定要調用該方法來 resolve 這個鉤子。執行效果依賴 next 方法的調用參數。

　　　　　　***確保要調用 next 方法，不然鉤子就不會被 resolved

 

• 路由獨享守衛【用法相似 聲明在routes中】
  

   1 const router = new VueRouter({
   2   routes: [
   3     {
   4       path: '/foo',
   5       component: Foo,
   6       beforeEnter: (to, from, next) => {
   7         // ...
   8       }
   9     }
  10   ]
  11 })

• 組件守衛【用法相似 聲明在組件中】

   1 const Foo = {
   2   template: `...`,
   3   beforeRouteEnter (to, from, next) {
   4     // 在渲染該組件的對應路由被 confirm 前調用
   5     // 不！能！獲取組件實例 `this`
   6     // 由於當守衛執行前，組件實例還沒被建立
   7   },
   8   beforeRouteUpdate (to, from, next) {
   9     // 在當前路由改變，可是該組件被複用時調用
  10     // 舉例來講，對於一個帶有動態參數的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉的時候，
  11     // 因爲會渲染一樣的 Foo 組件，所以組件實例會被複用。而這個鉤子就會在這個狀況下被調用。
  12     // 能夠訪問組件實例 `this`
  13   },
  14   beforeRouteLeave (to, from, next) {
  15     // 導航離開該組件的對應路由時調用
  16     // 能夠訪問組件實例 `this`
  17   }
  18 }