### 安装 vue-router

yarn add vue-router

### 准备：用vue-cli 新建文件 

1.终端打开你当前目录 vue create +项目名

2.把 src/App.vue 文件重写为空白模板

3.在src/components目录下新建两个组件（a,b）

4. 在src/main.js 里引入 vue-router

>import VueRouter from 'vue-router'

注册使用：

>Vue.use(VueRouter) 

### 正式使用 vue-router

1.在src/main.js中 定义 路径及映射的组件
		
```
const routes= [
  { path: "/a", component: aa },
  { path: "/b", component: bb },

]

```

2.实例化 VuRouter

```
const router = new VueRouter({
  routes // (缩写) 相当于 routes: routes
})

```

3.渲染
（1） 在src/main.js中

```
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})


```

（2） 在src/app.vue 中 的id为 app 的div内部写入 router-view标签

```
<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

```

全部代码：

app.vue

```
<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
  
</script>

<style>
</style>


```
main.js

```
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import aa from "./components/a.vue";
import bb from "./components/b.vue";
Vue.use(VueRouter) 
Vue.config.productionTip = false

const routes= [
  { path: "/a", component: aa },
  { path: "/b", component: bb },

]
const router = new VueRouter({
  routes // (缩写) 相当于 routes: routes
})

new Vue({
  el: '#app',
  router,
  render: h => h(App)
})


```

a.vue
	
```

<template>
  <div class="hello">
   <div>这是aaa</div>
  </div>
</template>

<script>
export default {
  name: 'aa',

}
</script>


<style scoped>

</style>


```

b.vue (组件b)

```
<template>
  <div>
      <div>这是bbb</div>
  </div>
</template>

<script>
export default {
    name:"b"
}
</script>

<style>

</style>

```

### vuerouter 动态路由匹配

1.定义： 把匹配到的部分或全部路由，全都映射到一个组件

2.使用： 动态路径参数  用: 开头

（1）在main.js 的路由定义中：

  { path: "/a", component: aa },

修改为：

 { path: "/a/:参数名", component: 映射的组件名 },

（2） 在映射的组件中获取传入的动态参数的值

在引入的组件中 使用 {{ $route.params.参数名}} 获取参数的值

2.注：
当使用路由参数时，映射的组件会重复使用，都渲染相同组件，比起销毁再创建，速度会更快

但是，组件挂载的事件不会重复调用

如果要检测页面跳转，只能用watch 监听 $route对象或者使用beforeRouteUpdate 导航守卫

### 导航守卫

1.全局导航守卫

（1） 在	main.js中的 导出模块里 通过watch 监听 $route 对象

```
new Vue({
  el: '#app',
  router,
  watch:{
    '$route'(){
       window.console.log("aaa")
    }
 },
  render: h => h(App)
})


```

(2) 定义route.beforeEach

```
router.beforeEach((to,from,next)=>{
	.....
	next()
})

```

to:即将进入的页面信息

from 当前正要离开的页面信息

next  进行管道中的下一个钩子  
如果是 next(false), 中断当前的导航

2.路由独享的 导航守卫

在main.js中的 routes 路由定义：

```
const routes= [
  { path: "/a", component: aa },
  { path: "/b", component: bb },

]

```

把 { path: "/a", component: aa },改成：

```
 {
    path: "/b",
    component: bb, 
    beforeEnter:(to,from,next)=>{
      window.console.log("aaassjlfml;")
      next()
    }

  },

```

3.组件内的 导航守卫

在组件内的 导出模块中声明
beforeRouteEnter，beforeRouteUpdate，beforeRouteLeave
参数都是 from,to,next

beforeRouterEnter: 进入该组件的时候调用

beforeRouteUPdate :路由改变呢重用组件的时候调用

beforeRouteLeave ： 离开该组件的时候调用

eg:

```
export default {
  name: 'aa',
   beforeRouteEnter (to, from, next) {
    window.console.log("组件里的")
    next()
  },
}

```

###嵌套路由

1.定义所需要渲染的组件（c,d）

2.在父组件内部的template中加入 router-view标签

3.在main.js 中声明 路由的地方 
把  { path: "/b", component: bb },改成:

```
 {
    path: "/b",
    component: bb, 
    children:[
	{path:"路由名",component:"映射的组件名"}
	……
     ]
  },

```

4.访问时 的路径 ： localhost:8080/#/父路由名/子组件名

全部代码(仅展示 routes 即路由定义部分)

```
const routes = [
  { path: "/a/:id", component: aa },
  {
    path: "/b",
    component: bb, 
    // beforeEnter:(to,from,next)=>{
    //   window.console.log(to,"aaassjlfml;")
    //   next()
    // },
    
    children: [
      // {path:'/',component:bb},
      {path:'c',component:c},
      {path:'d',component:d},
    ]
  },

]

```
### route.push()实现页面跳转

1.route.push("页面路由")//路由后面可以直接用?参数名=参数值传参

2.route.push({path:"页面路由",query:{参数名:参数值})
	
3.route.push({name:"定义的路由的name值",params:{参数名：参数值})