路由跳转问题

Question

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

第一个问题：

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

第二个问题

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

Answer 1

Best_Coder_LCN 2024-11-19 15:53:22

找到解决方案了，

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

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

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

Answer 2

张轩 2022-07-08 09:15:38

同学你好

非常感谢你的问题

第一个问题：

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

第二个问题

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

• 提问者 慕莱坞3345942 #1

  老师你好：
  第一个问题：
  点击跳转我的专栏后，其实路由完成了跳转，但是因为 setup 只执行一次，所以 route 还是之前的 useRoute() 获取到的。
  没有触发 currentId 的响应式，没有发送新的请求，store 中的数据还是之前的，所以页面没有显示新的内容，是这样的吗？
  第二个问题
  是的老师，从他人专栏 -> 我的专栏 再点击后退时候，路由更新但是页面不更新。

• 张轩 回复 提问者 慕莱坞3345942 #2

  同学你好
  感谢反馈
  第一个是这样的。
  第二个我去确认一下，稍微晚一点提供一下解决方案。

• 林林林修羽 回复 张轩 #3

  老师 现在第二个问题还存在

点开查看后面1条评论