# Vue-router学习笔记
标签（空格分隔）： vue 前端开发
---
## 1. 起步
+ 下载
- npm i vue-router -S
+ 安装
- import VueRouter from 'vue-router'
- Vue.use(VueRouter)
+ 使用
```<body>
<div id="app">
<router-view></router-view>
</div>
<script>
let home = {
template: `
<div><h1>home页面</h1></div>
`
}
const router = new VueRouter({
routes: [
{path:'/home', component: home},
{path: '/',redirect: '/home'}
]
})
const vm = new Vue({
el: '#app',
data: {},
methods: {
},
router
})
</script>
```
## 2. 进阶
### 1.路由嵌套
```
const router = new VueRouter({
routes: [
{
path:'/home',
component: home,
children: [//注意:子路由前面不能加'/'路径router-link的to属性引用时,必须写全路径'/home/homeson'
{path: 'homeson',component: homeson}
]
},//redirect 重定向
{path: '/',redirect: '/home'}
]
})
```
### 2. 路由视图
+ 当一个路由需要同时指定多个组件渲染规则时,应用命名的方式来指定相应的渲染规则
```
<div id="app">
<router-view></router-view>
<router-view name="top"></router-view>
<router-view name="left"></router-view>
<router-view name="right"></router-view>
</div>
<script>
{
path: '/index',
components: { //注意,这里是components而不是component
default: com0,
top: com1,
left: com2,
right: com3
//键是router-view的name属性值,值是指定该router-view渲染哪个组件(注意,当键为default时,默认没有设定name属性的router-view将会渲染该键对应的组件)
}
}
</script>
```
### 3. 重定向、别名、路由组件传参
+ 重定向
```
routes: [//redirect 接收三种写法的参数 当访问路由'/a'时会自动跳转到路由'/b'
{ path: '/a', redirect: '/b' },
{ path: '/a', redirect: { name: 'foo' }},
{ path: '/a', redirect: to => {
// 方法接收 目标路由 作为参数
// return 重定向的 字符串路径/路径对象
}}
]
```
+ 别名
```
routes: [
// '/a'的别名为'/b'意味着,当访问路由'/b'时,会按照/a的匹配规则来操作'/b'也就是'/a'的小名
{ path: '/a', component: A, alias: '/b' }
]
```
+ 路由组件传参
```
//在组件中使用 $route 会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性。
const User = {
template: '<div>User {{ $route.params.id }}</div>'
}
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User }
]
})
//
```
+ 通过 props 解耦
```
const User = {
props: ['id'],
template: '<div>User {{ id }}</div>'
}
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User, props: true },
//对于包含命名视图的路由，你必须分别为每个命名视图添加 `props` 选项：
{
path: '/user/:id',
components: { default: User, sidebar: Sidebar },
props: { default: true, sidebar: false }
}
]
})
```
### 4. 导航守卫
#### 4.1 全局守卫
+ 1.全局前置守卫
```
router.beforeEach (to, from, next) => {
// to 要去的路由对象 from要离开的路由对象 next 一个钩子函数,执行效果依赖next的参数--->next()执行下一个钩子函数,若钩子函数执行完毕,导航状态就是确认的(进行原本的跳转行为)
//next(false)中断当前导航 next('/')或next({path:'/'})跳转到新的导航,当前导航终止
//next(error) 如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。
}
```
+ 2.全局解析守卫
```
//在 2.5.0+ 你可以用 router.beforeResolve 注册一个全局守卫。这和 router.beforeEach 类似，区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用。
```
+ 3.全局后置钩子
```
router.afterEach((to, from) => {
// 和守卫不同的是，这些钩子不会接受 next 函数也不会改变导航本身
})
```
#### 4.2 路由独享的守卫
+ 你可以在路由配置上直接定义,这些守卫与全局前置守卫的方法参数是一样的。
```
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// ...
}
}
]
})
```
#### 4.2 组件内的守卫
+ 最后，你可以在路由组件内直接定义以下路由导航守卫
- beforeRouteEnter
- beforeRouteUpdate
- beforeRouteLeave
```
const Foo = {
template: `...`,
beforeRouteEnter (to, from, next) {
// 在渲染该组件的对应路由被 confirm 前调用
// 不！能！获取组件实例 `this`
// 因为当守卫执行前，组件实例还没被创建,不过，你可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数。
},
beforeRouteUpdate (to, from, next) {
// 在当前路由改变，但是该组件被复用时调用
// 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
// 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 可以访问组件实例 `this`
},
beforeRouteLeave (to, from, next) {
// 导航离开该组件的对应路由时调用
// 可以访问组件实例 `this`
}
}
```
### 完整的导航解析流程
1. 导航被触发。
2. 在失活的组件里调用离开守卫。
3. 调用全局的 beforeEach 守卫。
4. 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
5. 在路由配置里调用 beforeEnter。
6. 解析异步路由组件。
7. 在被激活的组件里调用 beforeRouteEnter。
8. 调用全局的 beforeResolve 守卫 (2.5+)。
9. 导航被确认。
10. 调用全局的 afterEach 钩子。
11. 触发 DOM 更新。
12. 用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。
