router進階

建議直接查看官方文檔：

https://router.vuejs.org/zh/guide/advanced/meta.html


主要內容
- 路由組件傳參
- html5 History 模式
- 導航守衛
- 路由元信息
- 過渡效果


### 路由組件傳參

參數的獲取，能夠經過

```
this.$router.params.id 或者this.$router.query.id 
```
來獲取；可是，有缺陷。就是頁面組件，和路由進行了高度耦合。

爲了解，組件高度複用，就要用到路由組件傳參


#### 路由組件傳參3種形式。


第一種：布爾模式。適用於，在動態路由匹配中，有動態路由參數的路由配置中。爲了解耦，須要在組件頁面，把傳進來的參數以屬性的方式進行解耦。


```
//router.js 中配置

{
    path:'/detail/:id',
    name:'detail',
    component:Detail,
    props:true//裏面的參數,來控制使用把路由參數做爲對象的屬性
}

//vue 文件
<div>{{name}}</div>

<script>
export default{
    pros:{
        id:{
           type:[String,Number],
           default:0 //給一個默認參數
        }
    }
}

</script>
```
### 第二種方式，普通的 對象模式


```
//router.js
{
    path:'/self',
    name:'self',
    component:Self,
    props:{
        name:'李四'
    }
}





//vue.js
<div>{{name}}</div>

<script>

export default{
    props:{
        name:{
            type:String,
            default:'張三'
        }
    }
}

</script>
```
### 函數模式 
適合於在傳入的屬性中可以根據當前的路由，來作一些處理邏輯，來設置傳入組件的屬性值

```
//router.js
{
    path:'home',
    name:'home',
    component:Home,
    props:res=>({
        id:res.query.id
    })
}


//.vue 文件

{{id}}

<script>
export default {
    props:{
        id:{
            type:String,
            default:'123'
        }
    }
}

</script>
```

## html5 router的 mode 模式


vue-router 

```
router index.js

export default new Router({
    mode:'hash',
    routes
})
```

mode:hash / history


mode ：模式，默認是（hash）哈希模式，在瀏覽器的url中，會有# 出現。
history： 利用的是history的api，作無刷新的頁面跳轉。
這種模式須要後端來進行配合。

後面寫：爲何，後端如何實現



Apache 
```
<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>
```
nginx

```
location / {
  try_files $uri $uri/ /index.html;
}
```
node.js

```
const http = require('http')
const fs = require('fs')
const httpPort = 80

http.createServer((req, res) => {
  fs.readFile('index.htm', 'utf-8', (err, content) => {
    if (err) {
      console.log('We cannot open "index.htm" file.')
    }

    res.writeHead(200, {
      'Content-Type': 'text/html; charset=utf-8'
    })

    res.end(content)
  })
}).listen(httpPort, () => {
  console.log('Server listening on: http://localhost:%s', httpPort)
})
```
可參考：https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90





使用history模式，沒有# 號出現。

使用history 模式，全部匹配不到的靜態資源，都須要指向一個通用的頁面，在路由裏面加配置，兼容處理這種模式帶來的問題



```
{
    path:'*',
    component:404Error
}
```

這個指向，要定義到最後，由於這個json 文件是從上到下執行的。
若是先執行了上述的對象，那麼都會報404Error了



### 導航守衛

功能是路由發生跳轉，到導航結束的時間內，作邏輯處理

好比：登陸，權限控制
例如：

```
/**
 * 當一個導航觸發時，全局前置守衛按照建立順序調用。守衛是異步解析執行，此時導航在全部守衛 resolve 完以前一直處於 等待中。

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

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

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

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

next(): 進行管道中的下一個鉤子。若是所有鉤子執行完了，則導航的狀態就是 confirmed （確認的）。

next(false): 中斷當前的導航。若是瀏覽器的 URL 改變了（多是用戶手動或者瀏覽器後退按鈕），那麼 URL 地址會重置到 from 路由對應的地址。

next('/') 或者 next({ path: '/' }): 跳轉到一個不一樣的地址。當前的導航被中斷，而後進行一個新的導航。

next(error): (2.4.0+) 若是傳入 next 的參數是一個 Error 實例，則導航會被終止且該錯誤會被傳遞給 router.onError() 註冊過的回調。

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


 * 
 * 
 * 
 * 
 */


/* 全局守衛示例 */

/*
*router.beforeEach((to,from,next)=>{
    //業務代碼
})







*/

// 添加路由守衛
/**
 * 判斷是否有eleToken，用來判斷是否登陸了
 * 
 */


router.beforeEach((to, from, next) => {
  const isLogin = localStorage.eleToken ? true : false;
  /** 
   * 判斷是否是從login，或者register 頁面，若是是那麼繼續，
   * 若是不是，那麼判斷isLogin是否存在
   * 若是存在那麼繼續，若是不存在，那麼跳轉到login
   * 
  */
  if (to.path == "/login" || to.path == "/register") {
    next();
  } else {
    isLogin ? next() : next("/login");
  }
})
```

## 導航守衛

全局守衛
```
router.beforeEach((to, from, next) => {
  // ...
})
```
全局解析守衛(和全局守衛相似，區別在於導航被確認以前，同時在全部的組件內守衛和異步路由組件被解析以後，解析守衛就被調用)


```
router.beforeResolve((to, from, next) => {
  // ...
})
```
全局後置鉤子

守衛不一樣的是，這些鉤子不會接受 next 函數也不會改變導航自己
```
router.afterEach((to, from) => {
  // ...
})
```

路由獨享的守衛

```
const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})
```

組件內的守衛

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


### 完整的導航解析流程
```

導航被觸發。
在失活的組件裏調用離開守衛（beforeRouteLeave）。
調用全局的 beforeEach 守衛。
在重用的組件裏調用 beforeRouteUpdate 守衛 (2.2+)。
在路由配置裏調用 beforeEnter。
解析異步路由組件。
在被激活的組件裏調用 beforeRouteEnter。
調用全局的 beforeResolve 守衛 (2.5+)。
導航被確認。
調用全局的 afterEach 鉤子。
觸發 DOM 更新。
用建立好的實例調用 beforeRouteEnter 守衛中傳給 next 的回調函數。
```



## 路由元信息

```
const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      children: [
        {
          path: 'bar',
          component: Bar,
          // a meta field
          meta: { requiresAuth: true }
        }
      ]
    }
  ]
})
```
## 路由切換動畫

```
 <transition-group name="router">      <router-view key="default" />      <router-view key="tel"                   name="tel" />      <router-view key="email"                   name="email" />    </transition-group>


.router-enter  opacity 0.router-enter-active  transition 1s opacity ease.router-enter-to  opacity 1.router-leave  opacity 1.router-leave-active  transition 1s opacity ease.router-leave-to  opacity 0

```




複製代碼