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
     }
 }

可以在路由守卫中 (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的人带来逻辑思路上的灵感,本人也是一名新人,欢迎大家多多指教!

你可能感兴趣的:(vue.js,javascript,前端)