9
In a child component 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 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 };
  }
})

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

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 component.

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",
  component: Home
 },
 {
  path: "/blog/:user/:article?",
  name: "Article",
  component: () => import(/* webpackChunkName: "article" */ "@/views/Article.vue"),
 },
];

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

Note: This is my first vue project~

axlis
  • 395
  • 1
  • 3
  • 13
  • Try out `router.push({ name: 'Article', params: { user: user,article:row.Name }, replace:true });` – Boussadjra Brahim Jun 27 '21 at 07: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 Jun 27 '21 at 07:57
  • why do want to watch the route? – Boussadjra Brahim Jun 27 '21 at 08:17
  • Does it work when you use `` in the template instead of the row link? This could help top narrow down the issue. – Denny Mueller Jun 27 '21 at 08: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 Jun 27 '21 at 08:46
  • so what's the problem the watcher – Boussadjra Brahim Jun 27 '21 at 09:00
  • @Boussadjra Brahim Main problem is the content doesn't update, i need to capture the changes and send asios request again, but i can't capture the change. – axlis Jun 27 '21 at 09:26

2 Answers2

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

Lee Goddard
  • 10,680
  • 4
  • 46
  • 63
Boussadjra Brahim
  • 82,684
  • 19
  • 144
  • 164
2

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
  })
andbi
  • 4,426
  • 5
  • 45
  • 70