# ***vue-router***
> 本文檔主要是對 `vue-router` 的使用，附上 `demo` 主要源碼以供參考
## 1. 路由注冊：
~~~
import vue from 'vue'
import Router from 'vue-router'
import routes from './router'
?
vue.use(Router)
?
const router = newRouter({
?// 默認為 hash
?mode: 'history',
?// 基路徑
?base: '/',
?routes
})
?
router.beforeEach((to, from, next) => {
?// 正要離開的路由對象
?console.error('from', from)
?// 即將進入的目標路由對象
?console.error('to', to)
?// 使用該函數來reslove這個鉤子，可以傳遞參數來重定向路由
?next()
})
export default router
~~~
### 1.1 動態屬性設置
`:` 符號接參數名，在跳轉路由時會動態更改參數值
~~~
export default new Router({
?routes: [{
path: '/',
? ?//...
}, {
? ?path: '/login/:id',
? ?name: 'login'
? ?// ...
}]
})
~~~
~~~
const id = 1
this.$router.push(`/login/${id}`) // -> /login/1
~~~
## 2. 頁面跳轉
### 2.1 元素標簽路由跳轉
~~~
<router-link to="/home">HOME</router-link>
~~~
### 2.2 通過方法跳轉（常用）
~~~
// just a string path
this.$router.push('/home')
?
// or a object
router.push({ path: 'home' })
?
// with params
const userId = '123'
router.push({ name: 'user', params: { userId } }) // -> /user/123
router.push({ `/user/${userId}` }) // -> /user/123
router.push({ name: 'user', query: { userId }}) // -> user?userId=123
~~~
## 3. 路由守衛
before
## 單頁面應用刷新機制
本次探索主要為了看能否將該機制用于微前端。
