vue路由

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(()=>{})

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值