Vue路由守卫在项目中的应用

路由守卫的实际应用

之前在看Vue-Router文档的时候看到路由守卫，但只是为了应付面试，实际开发过程中用的并不多，最近在项目中的一些地方用到了一些组件内的路由守卫，记录一下。

利用路由守卫改变路由的元信息，从而改变面包屑

在最近做的一个项目中，页面顶部的面包屑信息是在面包屑导航组件里面通过监听路由对象的mate动态生成的，在写一些新增/查看/编辑的页面的时候，往往把这些页面都集成在了同一个页面，通过路由跳转的时候带一个pageType参数来控制这个页面的显示类型，但是在配置路由的时候又只能够写一个元信息，但是又如何根据页面类型来显示不同的面包屑呢？这时候想到了用路由守卫。

每个守卫方法接收三个参数：1.to:即将要进入的目标路由对象。2.from:当前导航正要离开的路由。3.next:function:一定要调用该方法来resolve这个钩子，执行效果依赖next方法的调用参数。

// 利用路由守卫修改面包屑文字
  beforeRouteEnter(to, from, next) {
    to.query.pageType === 'detail'
      ? (to.meta.title = '查看')
      : to.query.pageType === 'edit'
      ? (to.meta.title = '编辑')
      : (to.meta.title = '新增')
    next()
  }

这里通过路由跳转时传入的pageType来判断这个页面的显示类型来改变这个配置路由的路由元信息，从而改变面包屑的标题。
后来产品又说在查看详情页面需要一个按钮，把详情页变成编辑页，这时候可以添加一个编辑按钮调用以下方法。

	// 改变当前页面的pageType
	methods: {
		toEdit() {
			this.$router.push({ query: { pageType: 'edit'} } )
		}
	},
	// 通过路由守卫监听路由参数的变化从而改变路由元信息
	beforeRouteUpdate (to, from, next) {
    to.query.pageType === 'detail'
      ? (to.meta.title = '查看')
      : (to.meta.title = '编辑')
    next()
  },

这样就实现了动态改变同一个页面的面包屑信息。
当然还有更方便的方法，那就是给这个页面配三个路由对象如下，然后根据不同的需要，在路由跳转的时候push不同的name就可以了，具体如下图。

通过路由守卫判断从哪个页面返回

如图，项目当中有一个页面是通过顶部的Tab栏来切换两个不同的table列表的，这两个列表又可以下钻到各种的新增/修改页面，而这个tab栏是根据当前页面的tabIndex来控制的，这个tabIndex初始化的时候默认是0，也就是返回第一个table页（接收人列表），这样就导致了一个问题，就是每次当你从第二个table（也就是接收组列表）下钻到新增/修改页面需要返回到当前页面的时候，返回的时候都是显示接收人列表，这造成了非常不好的用户体验，正常的逻辑是，你从哪个tab下钻下去的，返回的时候就应该回到哪个列表，这时候可以通过路由守卫来看看是从哪个页面回来的，从而改变这个推送设置页面的tabIndex，实现代码如下：

// 利用路由修改新增/查看/返回列表页时tab栏状态，因为这时候组件还未初始化，先把这个值放到元信息当中
  beforeRouteEnter(to, from, next) {
    if(from.name === 'addGroup') {
      to.meta.type = 1
    } else{
      to.meta.type = 0
    }
    next()
  },
  // 在初始化的时候把这个值赋给tabIndex
  mounted() {
  	this.tabIndex = this.$route.meta.type
  }

由于水平有限，只想到了这些方法，如果有更好的办法也欢迎提出来~