当前位置：首页 > news >正文

Vue路由—进阶篇

news 来源：原创 2024/9/20 9:38:24

文章目录

路由守卫
- 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}}

可以在路由守卫中（to，from）参数中获取信息，完成逻辑需求

路由组件过渡特效

这个其实是动态组件的灵活使用，算是一个小知识点。

<router-view v-slot="{ Component }">    <transition name="sss" mode="out-in"><component :is="Component"></component></transition>
</router-view>

router-view 会渲染当前路由的对应组件，此时，我们可以通过 v-solt 把组件暴露出来。
然后通过 component 动态组件这个方法来渲染暴露出来的组件。
在 component 套一个transition，则可以定义切换组件的过渡动画效果。
Vue过渡和动画有更详细的讲解，可以去了解一下。

总结
以上就是vue路由进阶篇的所有内容，关于路由的知识点还有很多，如果大家想进一步更深入的了解组件的更多知识，可以去Vue的官网进行更全面的了解。
我更希望本篇文章，能给一些刚学习vue的人带来逻辑思路上的灵感，本人也是一名新人，欢迎大家多多指教！