Vue2路由守卫：解决路由传参页面刷新后参数消失的问题

需求

在应用中，经常出现需要点击某个按钮实现新建表单或编辑表单的场景，表单打开时需要从原页面获取一定的参数对表单数据进行初始化。这里就涉及到

1）新建表单，跳转至新页面（点击的表单不同，打开的页面不同）   -> 动态路由

2）从跳转前的页面向新页面传递参数   -> 路由中的参数传递

动态路由

在Vue中，动态路由是指根据特定的路径参数来动态加载路由组件。通过使用动态路由，我们可以根据不同的路径参数加载不同的组件，实现页面的动态切换。

路由中的两种传参方式及其利弊

路由传参可分为query传参和params传参

（1）、query传参

缺点：参数会在地址栏中显示

优点：刷新数据不会丢失

this.$router.push({path: '/path/newpath', query: {
          id: this.form.id, 
          param1:this.form.param1, 
          param1:this.form.param12
        }});

（2）、params传参

优点：参数不会显示在地址栏中

缺点：

• 仅第一次点击跳转，页面打开状态下，再次点击，因未检查到路由变化（URL变化），不会再次打开页面，如需要每次点击新建都要打开一个新建页面，则无法实现；
• 刷新时数据会丢失；