Vue获取（返回）上一个路由

在Vue.js中，如果你想要在路由返回上一页的同时传递参数，可以结合Vuex（状态管理库）或者URL查询参数、路径动态参数来实现。这里提供一种常见的做法： 1. **通过Vuex**: - 在路由守卫`beforeEach`或`beforeRouterUpdate`中，检查当前要进入的页面是否需要携带某些数据。如果有，更新Vue的store状态。 - 当用户点击返回按钮时，从组件或者路由守卫中读取store的数据，并将其作为参数传回上一页。 ```javascript // 在store中设置数据 actions: { setBackData({ commit }, data) { commit('SET_BACK_DATA', data); } }, mutations: { SET_BACK_DATA(state, data) { state.backData = data; } } // 路由守卫 router.beforeEach((to, from, next) => { // 如果需要带数据，保存并继续导航 if (/* 判断条件 */) { this.$store.dispatch('setBackData', { paramKey: 'paramValue' }); } else { next(); } }) // 返回上一页时获取并传递参数 onBeforeRouteLeave(to, from, next) { const backData = this.$store.state.backData; // 如果存在则携带 next(false, { params: { ...backData } }); // false表示不跳转，直接离开 } ``` 2. **通过URL参数**: - 可以在离开当前页面时，将参数添加到URL查询字符串中，然后在返回时读取这些参数。 ```javascript this.$router.push({ query: { returnParam: 'yourValue' } }); // 返回时 const returnParam = this.$route.query.returnParam; ``` 3. **通过动态路由参数**: - 如果返回的是某个特定路由的详情页，你可以存储参数在组件实例或者vuex中，然后在离开该路由时带上。 ```javascript <template> <button @click="goBack">返回</button> </template> <script> export default { methods: { goBack() { const param = /* 获取参数 */; this.$router.go(-1, { params: { yourParam: param } }); }, }, }; </script> ```