目录
四.HTML5的history模式:replaceState
十三.当keep-alive遇见vue-router (美丽的邂逅)
安装使用路由
一.创建一个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的生命周期
生命周期钩子: https://v3.cn.vuejs.org/api/options-lifecycle-hooks.html#beforecreate
无论是你执行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