前端实训-中级阶段(40)-vue2.x路由vue-router

导航守卫和路由钩子函数提供跳转或取消导航的能力。分为全局、路由和组件级别。对参数或查询的更改不会触发进入/退出导航守卫，您可以通过观察$route对象或使用beforeRouteUpdatein-component守卫来处理这些更改。全局级别的钩子函数定义在全局级别的router上，比如router.beforeEach。beforeEach全局预挂钩函数。当导航触发时，将按创建顺序调用全局前卫。守卫是异步执行的。这个时候导航就等着守卫全部解决了。constrouter=newVueRouter({...})router.beforeEach((to,from,next)=>{//to:Route:即将进入的目标路由对象//from:Route:当前导航即将离开//next():执行下一个钩子，必须调用，否则会一直等待//next(false):中断本次跳转//next(path):跳转到新地址，通常是一个权限判断，无权限进入登录页面//next(error):(2.4.0+)触发onError事件})beforeResolve全局解析钩子函数(2.5.0+)。这类似于router.beforeEach，除了在确认导航之前调用resolveguards，并且在解析所有组件内的guards和异步路由组件之后。afterEach全局后挂钩函数路由级别定义路由时设置挂钩函数路由级别。constrouter=newVueRouter({routes:[{path:'/foo',component:Foo,beforeEnter:(to,from,next)=>{//...}}]})组件级钩子函数组件level是指定义组件时写的，和mounted是同一个level。比如路由改了，但是因为组件共享的问题，我们需要刷新。这时候我们可以在beforeRouteUpdate中做逻辑，或者watch监听$routebeforeRouteEnter在渲染组件之前被调用。这个beforeRouteUpdate(2.2new)在当前路由改变时无法获取，但是组件在复用时调用beforeRouteLeave。当离开组件对应的路由时调用。可用于防止用户在修改未保存时异常离开，并提示保存内容。完整的导航解析过程导航被触发。在停用的组件中调用beforeRouteLeave守卫。调用全局beforeEach守卫。在可重用组件中调用beforeRouteUpdate守卫(2.2+)。在路由配置中调用beforeEnter。解析异步路由组件。在激活的组件中调用beforeRouteEnter。调用全局beforeResolve守卫(2.5+)。导航已确认。调用全局afterEach挂钩。触发DOM更新。在beforeRouteEnter守卫中调用传递给next的回调函数，创建的组件实例会作为回调函数的参数传入。路由对象属性$route下属性的引入统一基于如下配置：页面URL：https://www.lilnong.top/cors/vueRouter?a=1#b路由规则：/cors/:keypath对应对当前路由的路径总是解析为路由规则中参数对应的绝对路径/cors/vueRouterparams。this.$route.params.key=='vueRouter'query对应查询字符串。this.$route.query.a=='1'hash对应锚点。this.$route.hash=='#b'fullPath对应完整的URL。matched包含所有匹配的路由规则。name包含当前路由的name属性redirectedFrom，对应重定向源位置。高级技能组件与路由系统解耦。在组件开发中，我们一般会定义props，但是路由系统是$route。这种冲突会破坏我们的组件并降低可重用性。这时候我们在定义路由的时候，给组件设置props:true，这样route.params就会被设置为一个组件属性。props:true:将route.params设置为组件属性props:{aaa:false}:直接将此对象作为组件属性传入routingmetainformationmeta)，有时候我们需要为路由设置一些信息，比如是否缓存，可访问角色&权限控制等。当定义constrouter=newVueRouter({routes:[{path:'/config',component:config,meta:{role:['admin']}}]})时得到$route.meta.role。也可以在hook函数中获取to.matched.map(record=>record.meta.role)，matched可以获取所有匹配的路由记录。路由懒加载，我们需要结合Vue的异步组件和Webpack的代码拆分功能来实现路由组件的懒加载。Vue允许组件是异步的。constFoo=()=>Promise.resolve({/*组件定义对象*/})和webpack引入资源变成constFoo=()=>import(/*webpackChunkName:"group-foo"*/'./foo.vue'),/*webpackChunkName:"group-foo"*/是group-chunk打包的一个功能，个人使用可以看看。动态添加路由规则，router.addRoutes(routes:Array)常用注意事项使用路由参数时，组件会被复用，被复用的组件生命周期钩子不会被再次调用。你可以通过watch监听$route来监听变化，或者通过beforeRouteUpdate钩子函数（vueRouter@2.2版本支持）。*匹配404时，与动态路由一起使用时，会出现添加后无法响应的路由问题。这是因为匹配规则先匹配之前定义的，如果找到则不再继续匹配（匹配的优先级按照路由的定义顺序：谁先定义的优先级最高。).所以解决办法就是动态添加404匹配规则。微信公众号：前端力农参考前端培训目录，前端培训规划，前端培训计划