8个页面的网站怎么做,做免费的小说网站可以赚钱吗,网站建设标志头像图片,黄页网站查询数据文章目录 路由守卫1、 路由全局守卫全局前置守卫#xff1a;全局后置守卫#xff1a; 2、 路由独享守卫3、 组件内部守卫组件前置守卫#xff1a;组件更新守卫#xff1a;组件离开守卫#xff1a; 路由元信息路由组件过渡特效 本篇内容讲述了更多关于 Vue路由 这方面的知识… 文章目录 路由守卫1、 路由全局守卫全局前置守卫全局后置守卫 2、 路由独享守卫3、 组件内部守卫组件前置守卫组件更新守卫组件离开守卫 路由元信息路由组件过渡特效 本篇内容讲述了更多关于 Vue路由 这方面的知识点如果大家对路由的基础知识了解不深的话可以去看看我的另一篇博客 Vue路由基础篇 路由守卫
什么是路由守卫 其实就是你进入或离开一个url地址的时候触发的方法叫做路由守卫。
1、 路由全局守卫
全局前置守卫
进入路由前触发
// router 就是你注册到根组件上的路由对象
router.beforeEach( (to,from){console.log(要跳转了);return false;
} )
app.use(router)beforeEach 这个方法有两个参数第一个是将要跳转到的 路由信息第二个是当前的路由信息。 to也就是去的意思from有来自哪里的意思。 return false 则会取消当前的跳转行为 return 一个路由地址则会跳转到此地址。 不写return或者返回undefined 则不会取消当然得跳转行为进行正常路由跳转
全局后置守卫
进入路由后触发
// router 就是你注册到根组件上的路由对象
router.beforeEach((to, from) {console.log(已经跳转了);});beforeEach这个方法也有两个参数第一个是将要跳转到的 路由信息第二个是当前的路由信息。 此方法就不用写 return 值了因为你已经完成了路由的跳转来到了新的路由组件了。 当然我们可以通过后置守卫完成一些别的逻辑比如关闭计时器修改页面标题等。
2、 路由独享守卫
顾名思义就是某条路由自己的守卫对应的其他路由跳转就不会触发它。 而且它只在不同路由跳转进来后触发。 如果只是单纯的参数改变它也不会被触发
{path:/mine,name:mine,component: Mine,meta:{title:我的},// 此守卫只会在不同路由进入时触发。如果只是单纯的参数改变并不会触发。beforeEnter:(to,from) {console.log(to)}
},3、 组件内部守卫
组件前置守卫
// router 就是你注册到根组件上的路由对象
beforeRouterEnter( (to,from,next){next(vm{// 通过vm 访问组件实例}
} )在渲染该组件的对应路由前调用。 不能获取组件实例 this 因为当次守卫被触发时组件实例还没被创建 但是可以通过 next 方法用回调函数的方式拿的组件实例这样就可以用组件实例的方法了。
组件更新守卫
// router 就是你注册到根组件上的路由对象
beforeRouterUpdate( (to,from){consolg.log(参数更新)
} )当路由参数发生改变时会触发此方法组件不会重新创建但会执行此方法
组件离开守卫
// router 就是你注册到根组件上的路由对象
beforeRouterLeave( (to,from){consolg.log(离开组件前)
} )在离开组件前触发守卫此方法同样可以通过 return 控制离开行为
路由元信息
如果想在路由上附加一个额外信息可以在定义路由时通过meta属性实现。
// router 就是你注册到根组件上的路由对象
{// 匹配所有没规定的路由path: /:pathMatch(.*)*,name: any,redirect: { path: /404 },meta: {title: 任意,hidden: true}}可以在路由守卫中 tofrom参数中获取信息完成逻辑需求
路由组件过渡特效
这个其实是 动态组件的灵活使用算是一个小知识点。
router-view v-slot{ Component } transition namesss modeout-incomponent :isComponent/component/transition
/router-viewrouter-view 会渲染当前路由的对应组件此时我们可以通过 v-solt 把组件暴露出来。 然后通过 component 动态组件 这个方法来 渲染暴露出来的组件。 在 component 套一个transition则可以定义切换组件的过渡动画效果。 Vue过渡和动画有更详细的讲解可以去了解一下。
总结 以上就是vue路由进阶篇的所有内容关于路由的知识点还有很多如果大家想进一步更深入的了解组件的更多知识可以去Vue的官网进行更全面的了解。 我更希望本篇文章能给一些刚学习vue的人带来逻辑思路上的灵感本人也是一名新人欢迎大家多多指教
