3
在子组件中，我遇到了一些问题。

路由器配置路径“/blog/:user/:article”

文件“文章.vue”

defineComponent({
  setup() {
    console.log("Call setup()"); // Debug info

    const route  = useRoute();
    const router = useRouter();
    const store  = useStore(); // vuex
    
    // here omits many details.
    // some axios requests depend on the variables above.

    // problem come here
    // this is a function bind to a table(or list) display in <template>.
    // but the route must change and I need to update this component based on the row.
    const rowClick = (row) => {
      router.push("/blog/" + user + "/" + row.Name);
    }
    return { rowClick };
  }
})

但这不起作用，因为路由器认为它是同一个组件，并拒绝重新加载该组件。

所以我在调试控制台中看不到调试信息。

我有什么尝试。

首先，我只是使用 location.replace 来强制应用程序重新加载整个页面。

但这并不优雅，它需要更多的时间来重新加载和历史消失。

然后我尝试观看 route.params 但我的sonsole 记录了一个 vue 警告，告诉我观看源必须是 ref 反应性 obj 并且路由器推送仍然不更新组件。

watch(route.params, (previous, current) => {
  console.log(`${previous} and ${current}`); // Debug info
})

我很困惑！vue3的设置应该注意什么？

更多信息
const routes: Array<RouteRecordRaw> = [
 {
  path: "/home",
  alias: "/",
  name: "Home",
  component: Home
 },
 {
  path: "/blog/:user/:article?",
  name: "Article",
  component: () => import(/* webpackChunkName: "article" */ "@/views/Article.vue"),
 },
];

export default createRouter({
 history: createWebHistory(),
 routes: routes,
});

注：这是我的第一个vue项目~

4

2 回答 2

1

尝试观看路线参数，例如：

watch(()=>route.params, (previous, current) => {
  console.log(`${previous} and ${current}`); 
},
{deep:true})

注意：()=>route.params改为使用route.params并添加deep选项

于 2021-06-27T09:29:39.097 回答
0

该push方法实际上返回一个Promise可用于处理更新后的路由：

this.$router.push("/blog/" + user + "/" + row.Name)
  .then(() => {
    console.log('Updated route', this.$route)
    // process the updated route params
  })
于 2021-12-13T04:56:37.727 回答