​ 这是我参与11月更文挑战的第21天，活动详情查看：2021最后一次更文挑战」 安装使用路由

一.创建一个vue项目

        终端运行vue init webpack vuerouter (记得配置的时候router选择yes)

        启动项目 npm run dev 

​

二.hash不会向服务器再次请求一次资源

​

清除后 在Console里面输入 locahost.hash = 'aaa'

​

三.HTML5的history模式:pushState

Console里面输入 history.pushState({},'','home')

​

这里的push类似于数据结构栈

​

​

四.HTML5的history模式：replaceState

​

五.HTML5的history模式：go

在执行history.go(-1) 在栈中返回到后一个路径

​

​

六.vuerouter的使用

创建两个.vue页面：Home.vue 和 About.vue​

在router里面写组件的映射关系

​

在App.vue里写router-link  类似于a标签实现跳转

还要加个router-view。相当于渲染位置的占位 可以换个地方自己写着试一试

​

这样就能实现页面跳转了

总结：​

七.更改为HTML5的history模式

​

八.router-link的其他属性补充

​

修改linkActiveClass

​

九.认识路由的懒加载

​

懒加载方式。三种

​

​

十一.参数传递的方式

​

​

十二.导航守卫

 前置和后置 

​

路由独享守卫

​

组件内守卫

这里就不演示了 都差不多。可以去官网查找

十三.当keep-alive遇见vue-router （美丽的邂逅）

​

​

十四:补充说明一下vue的生命周期

生命周期钩子： 生命周期钩子 | Vue.js 

​

无论是你执行new Vue 还是创建一个组件 都会有这样一个生命周期

1.先初始化生命周期init lifecycle

2.去看你有没有回调beforeCreate函数

3.init一些其他东西，比如响应式啊什么什么的

4.回调created

5.之后回去挂载el。只是对模版做一些操作，如果有el，也有template，template就会被编译成render函数，如果没有template什么已经变成render函数了

6.create vm replace el  一旦把el替换掉 意味着我们之前的template已经被挂载到DOM上面了，之后再回调mounted函数。 

7.被挂载完后会进行响应式的检测，你的数据发生变化时会回调一个函数beforUpdate，再通过re-render 重新渲染虚拟DOM 最后和真实DOM相对比然后进行patch（补丁）修改

8.接下来就是销毁。生命周期的终点。beforedestroyed -> destroyed 

​