路由的形式:
1、hash路由 url路径上带# 不需要后端配置的
2、history路由 url路径上不带# 使用的时候需要后端的配置
编程式导航
this.$router.back() 后退 () **常用!!!!!!!!!!!!!!!**
this.$router.forward() 前进
this.$router.push() 跳转 ()常用!!!!!!!!!!!!!!!!!!!
this.$router.go() 指定跳转 ()一般用不上!!!!!
this.$router.replace() 替换
$route与$router的区别
$route是当前路由的一些信息 例如跳转的路径以及携带的参数等
$router路由的实例化对象.里面有我们需要的一些方法 例如编程式导航的跳转等等
路由守卫:
路由钩子函数
解释:路由跳转前后的一些验证
全局守卫
beforeEach
局部守卫
beforeRouteEnter
进入路由前的守卫
在当前路由钩子函数中是访问不到this
的
1、登陆的验证
2、热力图
3、权限校验
4、消息通知
beforeRouteUpdate
路由更新时的守卫
当路由发生改变的时候,而当前组件没有经历创建和销毁的时候我们就需要用到了beforeRouteUpdate.
除此之外我们还可以通过watch
来监听$route
的变化也能达到同样的效果
beforeRouteLeave
路由离开时的守卫
1、未支付
2、未保存
3、答题系统
4、退出登陆
箭头回调函数
beforeEach全局守卫
路由守卫的参数
to:到哪个路由
from:从哪个路由来
next:进入路由
(to和from就相当于一个$route,这里面都是当前路由的信息)
路由懒加载
1、异步组件的方式
2、ES6import方式
脚手架的使用
cnpm install @vue/cli -g 全局安装
创建项目
vue create 项目名称