vue根据参数不同的路由跳转以及name的作用

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


vue根据参数不同的路由跳转以及name的作用_第1张图片

路由跳转的代码:

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的不同跳转路由复用同一个组件。

你可能感兴趣的:(vue根据参数不同的路由跳转以及name的作用)