最近在做VUE路由跳转根据参数的值不同但是跳转的是同一个路由的功能。点击左边的目录，根据目录ID跳转不同的列表。如下图。
路由跳转的代码：
this.$router.push({path: '/RFIndex/resourceList', name: '资源列表', params: {id: 2}})
也可以这么写
this.$router.push({path: '/RFIndex/resourceList', params: {id: 2}})
这两种其实都可以跳转到想要的路由。
但是我如果想要根据id的值不同而去跳转相同的路由，以下是id不同。
this.$router.push({path: '/RFIndex/resourceList', n params: {id: 2}})
和
this.$router.push({path: '/RFIndex/resourceList', params: {id: 3}})
但是当我点击跳转的时候右边的列表是没有刷新的。因为路由没有变化。虽然数据发生了变化，但是调用的依然是同一个组件，组件复用了所以不刷新。所以这时候就要使用不同的路由来跳转。下面在路由后面添加参数的值就可以让路由变化从而重新刷新页面。
this.$router.push({path: '/RFIndex/resourceList/:id', params: {id: 3}})
和
this.$router.push({path: '/RFIndex/resourceList/:id', params: {id: 2}})
此时还需要修改index.js里面的配置文件，路由后面加上:id
path: '/RFIndex/resourceList/：id',
这样子点击左边目录的时候，此时的路由并不是我想要的，因为根据id的不同路由始终是:id。
此时加上name属性，
this.$router.push({path: '/RFIndex/resourceList/:id', name: '资源列表',params: {id: 3}})
再修改index.js
name: '资源列表',path: '/RFIndex/resourceList',
再点击目录访问页面，发现URL正常了，还不是我想要的结果。因为就算路由发生了变化，数据还是没有变化。
因为vue每次调用组件的时候会观察是否已经created，而我的组件是已经created的，所以当我id发生变化的时候，组件没有重新创建。因此要在组件中再加上一个方法。把自己要处理的数据写在next()之后。
beforeRouteUpdate (to, from, next) {
next()
this.id = this.$route.params.id if (this.id === 3) {
this.tableData = tableApi.tableDataLess
} else {
this.tableData = tableApi.tableData
}
}
这样就可以根据id的不同跳转路由复用同一个组件。
------------------------------------------------------------------------------