vueRouter相关问题

vueRouter的整体流程

引用router>注册router>new router>导出且放在vue实例上

1.hash

监听hashchange方法
通过设置Location 对象 的 location.hash 或 location.href 属性修改锚部分;
使用不同history操作方法到带hash的页面;
点击链接跳转到锚点。

history

监听方法 popstate 当调用history.go()、history.back()、history.forward()时触发
跳转主要方式是history.pushState和history.replaceState
history.pushState会压栈保留，而history.replaceState是替换不会有返回上一级

路由跳转方式

1.this.router.push(’’)
2.this.router.push({name:’’})
3.this.router.push({path:’’}) name刷新不保留，path刷新保留
4.this.router.push({path:’’,query:}) query类似于get后面拼接?id=1刷新还在
5.this.router.push({path:’’,params:})params类似与post id=1但是刷新就不在了
6.this.router.replace()同上，不能返回上一级
this.router和this.route
this.route是显示当前路由的详细信息,以及获取传过来的参数query,params
this.router是全局路由实例，里面含有许多方法(push,go,replace)

路由守卫

to:即将要进入的目标路由对象；from:当前导航即将要离开的路由对象 ，
next()//直接进to 所指路由
next(false) //中断当前路由
next(‘route’) //跳转指定路由
next(‘error’) //跳转错误路由
全局路由router.beforeEach(to,from,next)=>{})
组件内路由 beforeRouteEnter
独享路由beforeEnter
导航守卫的执行顺序是怎么样的？
beforeRouteLeave < beforeEach < beforeRouteUpdate < beforeEnter < beforeRouteEnter < beforeResolve < afterEach