Vue的基础路由传值、导航守卫

xinxin_k
103 阅读3分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第16天，点击查看活动详情juejin.cn/post/714765…

路由传值

路由传值方法

1、params该方法传值前面已经介绍过了。

2、query传值 语法：

点击时传值：
this.$router.push({name:'/about',query:{属性名自定义：属性值想传什么传什么}})
接收：
this.$route.query.自定义的属性名

3、hash传值

点击时传值：
this.$router.push({name:'/about#123456'})
接收：
this.$route.hash

通过this.$route.path可以获取路径编码 URL 的 pathname 部分，与路由地址有关。 通过this.$route.fullPath可以获取

使用$route接收值会形成组件与路由的高耦合怎么解决耦合？

使用props将组件和路由解耦

  1. props的值为true，那么就是把route.params传给接收值的组件了。它只能解耦params和组件，params该怎么传值还怎么传。
  2. props的值是一个对象，那么就是把这个对象传给接收值的组件了。解耦的也是params。
  3. props的值是一个带返回值的函数，该函数返回一个对象，函数的返回值就作为了props传给接收值的组件了。 ·.png

导航守卫

通俗点说就是路由守卫可以监听路由的变化的，在路由切换的时候执行对应的钩子函数。 可以把这些钩子理解为是路由的生命周期。他们都是router对象身上的方法。

2.png

3.png

全局守卫

  • 作用域：适用于所有的组件。任何路由的变化，都会导致全局钩子函数触发。
  • 作用：大多数都是在跳转路由时做一些判断，然后再根据判断结果让你跳转还是不跳转。

全局前置守卫

  1. 语法：router.beforeEach(（to,from,next）=> {})
  2. 触发时机：点击了导航按钮之后，并在路由组件渲染出来之前触发。
  3. 该钩子是个异步的
  • 参数to：即将进入的路由组件。
  • 参数from：当前导航正要离开的对象
  • 参数next：它是个function，调用next代表该钩子函数执行完了，所以在该钩子函数里一定要调用next方法，否则程序无法进行。

如果next(false)，那么永远也跳转不过去路由。可以用在登陆时使用，登陆成功执行next（），用户名密码不正确则next（false）。

next("/")或next（{name:'/'}）类似于重定向。

next（error）

该钩子里只能有一个next，可以用条件语句

全局解析守卫

  • 他和前置守卫类似，项目中很少使用。
  • 触发时机：等所有组件内守卫和一部路由组件被解析之后调用

全局后置守卫

  • 触发时机：组件渲染完成之后触发。
  • 它没有next参数，并且该钩子不会改变导航本身 语法：router.afterEach(to,from){}

路由独享的守卫

作用域：它只针对某一个路由，相当于只监视你一个人，别人我不管。放在某一个路由对象里。 语法：

{
path:'/about',
name:'about',
component:About,
beforeEnter:(to,from,next)=>{}
}

组件内的守卫

  • 作用域：按范围来说也是针对某一个组件的。
  • 这三个钩子函数写在路由组件里
  1. 语法：beofreRouteEnter(to，from，next){}
  • 执行时机：已经跳转到当前路由组件了，在组件没生成之前执行，不可以访问this
  1. 语法：beofreRouteUpdate(to，from，next){}
  • 执行时机：在当前路由改变，但是该组件被复用时调用。
  • 例如你已经在这个组件里，又点击了一下该路由的导航按钮，这时候就进行调用。可以访问this。该钩子主要来监听传的值是不是发生了变化。
  1. 语法：beofreRouteLeave(to，from，next){}
  • 执行时机:导航离开该组件的路由时调用。可以访问this

监听路由传值变化有两种：watch和beforeRouteUpdate钩子

avatar
文章
阅读
粉丝