我要评论一、业务场景
列表页携带id跳转到详情页，id发生变化重新加载当前页面。
跳转分两种情况，假设a页面是id为1111的详情页，b页面是id为2222的详情页。
- 第一种，a页面跳转到b页面，b页面返回时直接返回列表页。
- 第二种，a页面跳转到b页面，b页面返回时返回a页面，a页面再返回返回到列表页。
二、实现方式
核心方法： $router.push $router.replace
a页面跳转到b页面的方法：
- 第一种情况：
import { userouter } from 'vue-router'
const router = userouter()
router.replace({
path: '/efilemanagement/company/collection/detail',
query: { id: '2222' }
})- 第二种情况：
import { userouter } from 'vue-router'
const router = userouter()
router.push({
path: '/efilemanagement/company/collection/detail',
query: { id: '2222' }
})三、发现问题
到第二步，我们需要的功能就已经实现了，但是会发现地址栏id是变化了，页面数据却并没有刷新，这时我们给app.vue里的router-view标签添加一个key值即可
如下：
<router-view :key="routerkey"></router-view>
import { useroute } from 'vue-router'
const route = useroute()
const routerkey = computed(() => {
return route.path + math.random()
})ok！
延伸：（keep-alive）
如果router-view在keep-alive标签下，那么需要再给router-view加个状态值，用来控制router-view显示隐藏，并且provide注入，方便页面中调用。
app.vue：
<router-view :key="routerkey" v-if="isalive"></router-view>
import { ref, provide, nexttick } from 'vue'
const isalive = ref<boolean>(true)
function reload() {
isalive.value = false
nexttick(() => {
isalive.value = true
})
}
provide('reload', reload)a页面里：
import { inject } from 'vue'
const reload:any = inject('reload')然后在push或者replace方法后调用reload方法。
import { userouter } from 'vue-router'
const router = userouter()
router.push({
path: '/efilemanagement/company/collection/detail',
query: { id: '2222' }
})
reload()总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持代码网。
发表评论