路由跳转问题

来源：11-6 缓存优化第二部分

慕莱坞3345942

2022-07-07

老师你好，
从他人专栏跳转到我的专栏时，可以看到路由地址发生变化但是页面没有更新
查看问题时候看到了老师你的解决办法：使用 watch 监听 route.params

此时的 const currentId = ref(route.params.id); 不是已经将路由后缀添加为响应式了吗，而且下边的 column 和 list 都是 computed ，那么为什么页面不会在路由地址变化时更新呢？

使用 watch 监听后仍然存在 bug，此时从他人专栏进入我的专栏后，在点击转到上一页同样是路由更新但是页面不更新，想知道如何解决呢？
这个 bug 发现在项目演示中同样存在。

写回答

2回答

Best_Coder_LCN

2024-11-19

找到解决方案了，

import { useRoute } from 'vue-router'
const route = useRoute()

然后在 app.vue 的 router-view 上加key就可以了。

<router-view :key="route.path"></router-view>

张轩

2022-07-08

同学你好

非常感谢你的问题

第一个问题：

请记住 setup 只运行一次，这就意味着 currentId 变成了一个新的响应式变量，但是它不会随着路由的变化而变化，所以当路由变化的时候，这个值是不会变化的。

第二个问题

你说的转到上一页指的是浏览器的后退按钮吗？有点没明白是哪个操作？

Best_Coder_LCN

林林林修羽

回复林林林修羽：找到解决方案了，在 app.vue 的router-view上加上:key="route.path" ```javascript import { useRoute } from 'vue-router' const route = useRoute() ```

2024-11-19

共4条回复

Vue3 + TS 仿知乎专栏企业级项目

带你完成前后端分离复杂项目，率先掌握 vue3 造轮子技能

3142 学习 · 2313 问题

相似问题

回答 2

回答 2

回答 1

回答 1

回答 1