javascript - vue3 router.push doesn't update the component when url match the same route? - Stack Overflow

admin管理员组

文章数量:1299995

In a child ponent I meet some problem.

router config path "/blog/:user/:article"

file "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 e 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 ponent based on the row.
    const rowClick = (row) => {
      router.push("/blog/" + user + "/" + row.Name);
    }
    return { rowClick };
  }
})

But that don't work, because the router think it is the same ponent, and refuse to reload the ponent.

So I don't see the Debug info in the debug cosole.

What I have try.

First I simply use the location.replace to force the application to reload the whole page.

But that doesn' elegant, it need more time to reload and history gone.

Then I try to watch the route.params but my sonsole log an vue warn which tell me that watch source must be a ref reactive obj and router push still don't update the ponent.

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

I was confused! What should watch in the setup of vue3?

more infomation

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

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

Note: This is my first vue project~

In a child ponent I meet some problem.

router config path "/blog/:user/:article"

file "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 e 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 ponent based on the row.
    const rowClick = (row) => {
      router.push("/blog/" + user + "/" + row.Name);
    }
    return { rowClick };
  }
})

But that don't work, because the router think it is the same ponent, and refuse to reload the ponent.

So I don't see the Debug info in the debug cosole.

What I have try.

First I simply use the location.replace to force the application to reload the whole page.

But that doesn' elegant, it need more time to reload and history gone.

Then I try to watch the route.params but my sonsole log an vue warn which tell me that watch source must be a ref reactive obj and router push still don't update the ponent.

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

I was confused! What should watch in the setup of vue3?

more infomation

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

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

Note: This is my first vue project~

• javascript
• vue.js
• vue-router
• vuejs3
• vue-router4

Share Improve this question Follow edited Jan 8, 2022 at 4:40 axlis asked Jun 27, 2021 at 7:19 axlisaxlis 41711 gold badge55 silver badges1515 bronze badges 7

• Try out router.push({ name: 'Article', params: { user: user,article:row.Name }, replace:true }); – Boussadjra Brahim Commented Jun 27, 2021 at 7:40
• @Boussadjra Brahim This seems to do nothing, i see the sonsole call the rowClick, browser's url change and history was added, but setup was only called once. I think that i have to ask watch() for help! – axlis Commented Jun 27, 2021 at 7:57
• why do want to watch the route? – Boussadjra Brahim Commented Jun 27, 2021 at 8:17
• Does it work when you use <router-link> in the template instead of the row link? This could help top narrow down the issue. – Denny Mueller Commented Jun 27, 2021 at 8:26
• @Boussadjra Brahim I add a pre upload version on github, you can read the most detailed 'Article.vue', the v-html depend on the content need to update.So i want to use watch the route to update the content, this is the core of this page. – axlis Commented Jun 27, 2021 at 8:46

 |  Show 2 more ments

2 Answers 2

Sorted by: Reset to default 3

Try out to watch the route params like :

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

Note : use () => route.params instead route.params and add deep option

The push method actually returns a Promise which can be used to process the updated route:

this.$router.push("/blog/" + user + "/" + row.Name)
  .then(() => {
    console.log('Updated route', this.$route)
    // process the updated route params
  })

本文标签： javascriptvue3 routerpush doesn39t update the component when url match the same routeStack Overflow