vue-router 在每个路由进入前添加参数

       在vue-router的钩子函数beforeEach函数中有三个参数to,from,next，因为不能直接 *** 作to.query,所以直接修改query的做法gg，但是to.meta是可以随意旋转跳跃的，嗯~灵感来了。

      大体想法是给meta里边一个标志来表示是否已经添加了想添加的字段，那就叫youKnowWho吧，首先设置to.meta.youKnowWho = false，在beforeEach开始时判断youKnowWho，为false时进行 *** 作，废话少说，上酸菜

router.beforeEach((to, from, next) =>{

  if (!to.meta.youKnowWho ) { // 说明没有进行 *** 作

    to.meta.youKnowWho= true // 一定要写，不然烫烫烫到怀疑人生

    let newTo = { ...to } // 不要直接to.query = 什么鬼，先克隆出来

    newTo.query.something= something // 做自己想做的事，这里只以query为例

    next(newTo)  // 重新跳转路由，这时候想干的事已经干完了，并且不会再进到这个if语句

    return

  }

..... // 别的 *** 作

})

最近在项目中遇到了很多页面跳转携带参数的处理，就在这里做个小小的总结，下面来看一下常见的三种传参方式

有如下场景，点击封装好的公共组件跳转到对应的详情页面

<businessTable @click.native="projectDetail(item)"></businessTable> 

在父组件中写点击跳转方法如下

 在路由配置页面配置路由如下

要注意的一点是需要在path中添加/:item来对应 $router.push 中path携带的参数。

在子组件中获取传递的参数值。

在父组件中写点击跳转方法如下

在路由页面配置路由如下

在子组件中获取传递的参数值。

在父组件中写点击跳转方法如下

这种情况下 query传递的参数会显示在url后面?item=？

在路由页面配置路由如下

在子组件中获取传递的参数值。

这里要特别注意 在子组件中 获取参数的时候是$route.params 而不是

$router 这很重要

---