详细解释vue-路由器导航卫士

作为一个Vue-cli项目，在路由跳转之前需要做一些验证，比如登录验证，这是网站的常见要求。

为此，vue路由器提供的before可以方便地实现全局导航保护。组件内的导航保护功能相同，但功能名称不同(beforeRouteEnter、beforerouteupdate(在2.2中添加)、beforeRouteLeave)。

Hook，在早期的编程中可能有一个叫做handle的概念。不知道把两者比较一下，强行归为一类是否合适。hooks的目的是在特定的进程中，在不同的时间公开一些函数，让用户可以覆盖这些函数，实现在原来的位置执行自己的代码逻辑的功能。

1.分类

vue-router中的导航钩子根据定义的位置不同(执行机会不同)，可以分为全局钩子、路由级钩子和组件级钩子。

有三个全局钩子，即beforeEach、beforeResolve和afterEach，它们在路由实例对象中注册和使用；

工艺路线层挂钩工艺路线层挂钩具有beforeEnter，这是在工艺路线配置项目中定义的；

组件级钩子组件级钩子包括beforeRouteEnter、beforeRouteUpdate和beforeRouteLeave，它们在组件属性中定义。

正式文件地址：https://router.vuejs.org/zh-cn/advanced/navigation-guards.html

如何组建全球卫队

您可以使用router.beforeEach每个人注册一个全局前端防护：只需在您的路由器配置下注册

constraint out=new vuerouter({ 0.})路由器。在每一个((到，从，下一个)={//.})当一个导航被触发时，全局守护进程按照创建的顺序被调用。守护是异步解析执行，导航是等待，直到所有守护都被解析。

每个保护方法接收三个参数：

至：路线：要输入的目标路线对象

从：路线：当前导航即将离开路线

Next:函数：必须调用此方法来解决此钩子。执行效果取决于下一个方法的调用参数。

Next():执行管道中的下一个钩子。如果所有钩子都被执行，导航状态被确认。下一步(假):中断当前导航。如果浏览器的网址发生变化(可能是用户手动或浏览器后退按钮)，网址将被重置为起始路由对应的地址。Next('/')或next({ path: '/' }):跳转到不同的地址。当前导航被中断，然后执行新的导航。您可以将任何位置对象传递给下一个，并且您可以设置诸如replace: true，name: 'home '等选项，以及在prop或router.push of router-link中使用的任何选项。Next(错误): (2.4.0)如果传递给next的参数是错误实例，导航将被终止，错误将被传递给路由器注册的回调。确保调用下一个方法，否则钩子将不会被解析。

首先，了解beforeEach()中的参数

全局保护(即保护整个路由实例，也保护子路由)

专用于路线的保护(在实例中保护路线)

总结：

全球和地方

从“Vue”导入Vue从“vue路由器”导入VueRouter//Vue中插件必须使用注册vue。使用(VueRouter)；//路由配置项，此处是路由级钩子的定义const routes=[{ path: '/'，组件： resolve=require([)./index.vue']，resolve)，keepAlive: true，}，{ path: '/user/:userName '，keepAlive: true，beforeEnter(to，from，next){ console。日志(“进入前路由器”)；next()；}，组件： resolve=require([)./user.vue']，resolve)，}]；//实例化路由对象const router=new VueRouter({ routes })；//全局钩子router.beforeEach((to，from，next)={ console。log('每个之前的全局')next()；});router.beforeResolve((to，from，next)={ console。log('解析前的全局')next()；});router.afterEach((to，from，next)={ console。log('每个')})之后的全局；//实例化某视频剪辑软件对象并挂载新vue({ 0路由器})。$ mount(' # app ')；use.vue组件中使用导航守卫

模板div h1{{ msg }}/h1 p我是： { {用户名} }/p/div/模板脚本导出默认值{ name: 'user '，data () { return { msg: '这里是用户页面，用户名： '叶落' };}，methods: {}，mounted(){ var me=this；me.userName=我$路线。参数。用户名；console.log('用户已挂载');}，BeforeRouter(to，from，next) { console.log('组件before Router’)；next()；}，BeforeRouteudate(到，从，下一个){ console.log('组件beforeRouteudate’)；next()；}，BeforeRouteLive(to，from，next){ console.log('组件before route life’)；next()；} };/script执行时机

由首页进入用户页面：

全局在每台路由器之前输入组件在路由器之前输入全局在解析全局在每台安装后

由用户回到首页：

组件前路由版本=全局前每个=全局前解析=全局后每个

排除在路由日期之前，其余六个导航钩子的执行时机其实很好理解。大体按照离开、之前、进入、解决、之后的顺序并全局优先的思路执行在路由日期之前的触发是在动态路由情形下，比如路径： '/用户/:用户名'这条路由，当页面不变更只动态的改变参数用户名时，在路由日期之前便会触发。

结论：使用某视频剪辑软件组件拼凑成整个应用，每个页面是独立的，路由依靠链接跳转，会刷新页面。使用某视频剪辑软件路由器则可以不刷新页面加载对应组件哈希和历史模式模拟路径变化，不刷新页面。

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对我们的支持。如果你想了解更多相关内容请查看下面相关链接