vue参数不同但是跳转同一个路由页面，及name的作用

最近在做VUE路由跳转根据参数的值不同但是跳转的是同一个路由的功能。点击左边的目录，根据目录ID跳转不同的列表。如下图。

 

 当我点击常用表单下面的属性的时候，都是跳转到表单页面，只是属性参数不同，数据不一样。

========================================================================

正常的路由跳转

this.$router.push({
         path:'formmanagement',
         query:{
           formState:'日常办公'
         }
   })

 

但是我如果想要根据参数的值不同而去跳转相同的路由，以下是参数不同。

// 1.
this.$router.push({
         path:'formmanagement',
         query:{
           formState:'作战指挥'
         }
   })

// 2.

this.$router.push({
         path:'formmanagement',
         query:{
           formState:'应急处理'
         }
   })

 

但是当我点击跳转的时候右边的列表是没有刷新的。因为路由没有变化。虽然参数发生了变化，但是调用的依然是同一个组件，组件复用了所以不刷新。

所以这时候就要使用不同的路由来跳转。下面在路由后面添加参数的值就可以让路由变化从而重新刷新页面。

 

this.$router.push({
         path:'formmanagement/:formState',　　　　　 name:'formmanagement', // 一定要写这个         query:{ formState:'应急处理' } })

此时还需要修改index.js里面的配置文件，路由后面加上:formState

 {
          path: '/formmanagement/:formState',
          name: 'formmanagement', // 上面匹配这里的name
          meta: {
            requireAuth: true,  
          },
          component:()=>import("@/pages/formmanagement/formmanagement"),
         },

再点击目录访问页面，发现URL正常了，还不是我想要的结果。因为就算路由发生了变化，数据还是没有变化。

因为vue每次调用组件的时候会观察是否已经created，而我的组件是已经created的，所以当我id发生变化的时候，组件没有重新创建。因此要在组件中再加上一个方法。把自己要处理的数据写在next()之后。

beforeRouteUpdate (to, from, next) {
     next()
     this.formState = this.$route.params.formState 
     this.queryuserdata(); // 调用查询数据接口
 

}

 

 

来源：https://www.cnblogs.com/hs610/p/11993469.html