vue路由分为3种,有hash模式,history模式和abstract模式,可以在路由对象中设置mode改变模式,
①abstract主要用在服务端。
②hash模式url会携带一个#,请求的时候该#及其后面的字符串不会发送给服务器,改变hash不会重新加载页面,可以通过onhashchange监听路由的改变,hash变化会被浏览器记录,浏览器的前进和后退都能用。
③history模式有几个api,分别是pushState(state,title,url),state是需要被保存的数据,title是标题,可设置为null,url是设定新的历史记录,该url必须与当前url同源,不然会报错,url可以是绝对路径,也可以是相对路径。还有一个api是replaceState(state,title,url),参数和pushState一样,它是替换历史记录,pushState是增加历史记录。这两个都可以在浏览器不刷新的情况下使用。除此之外还有history.back()是返回前一个页面,history.forward()是前进一个页面,history.go(-1)是回退一步,history.go(1)是前进一步,页面跳转可以通过popState进行监听
router和route的关系:router是全局路由对象,Router的实例,里面包含了history,mode等等。可以通过this.$router.push({path:'/index',query:{name:'xx'}})跳转页面,可以传递查询字符串,也可以传参this.$router.push({name:'xx',params:{id:'2'}})。route是当前跳转的路由对象,可以从中获取name,query等等
路由守卫
全局路由守卫
to是将要跳转的页面,from是当前页面,next是是否放行,不调用next()就不会跳转页面
router.beforeEach((to.from,next)=>{})
router.beforeResolve(()=>{})
router.afterEach(()=>{})
路由独享守卫
beforeEnter(to,from,next)
组件内守卫(在组件生命周期开始之前执行)
beforeRouterEnter(to,from,next){}
他们的执行顺序是
router.beforeEach((to.from,next)=>{})
beforeEnter(to,from,next)
beforeRouterEnter(to,from,next){}
router.beforeResolve(()=>{})
router.afterEach(()=>{})