Vue.js Router Link Not Updating

Question

I am encountering an issue that I have reproduced with the following simplified code:

App.vue

      <router-link to="/">Home</router-link> |
      <router-link :to="{name: 'View1', params: {myprop: 'hello 1'}}"> |
         View 1 - Param 1
      </router-link>
      <router-link :to="{name: 'View1', params: {myprop: 'hello 2'}}"> |
         View 1 - Param 2
      </router-link>
      <router-view :key='$route.path' />

View1.vue

    <template>
      <div>
        My prop = {{myprop}}
      </div>
    </template>

If I start on the Home link and click “View 1 - Param 1”, I am taken to View1 and see “My prop = hello 1”. This is as expected.

If I then go back to the home page and click “View 1 - Param 2”, I am taken to View1 and see “My prop = hello 2”. This is also as expected.

Here’s where the trouble starts. If I click “View 1 - Param 1” while I am already on “View 1 - Param 2”, then I am taken to View1, but the message does not update. So, I see “My prop = hello 2” again instead of seeing “My prop = hello 1”.

My understanding is that Vue is not rerendering View1 as an optimization since the “from” view and “to” view are the same, but clearly that is not the behavior I would like.

I did some research on this and came across a video that suggested using “key=’$route.path’” in the view tag would address this. However, this is not solving the issue for me.

What is the correct way to address this issue, please?

I cannot reproduce this codesandbox.io/s/twilight-thunder-v7fch. Correct me if my example wrong. — User 28
– User 28, Commented Jul 13, 2020 at 4:22
Brilliant, you solved the problem for me. I was not including the prop in the router path. Thank you very much. — crosen9999
– crosen9999, Commented Jul 13, 2020 at 4:58
I'm glad to hear that. By the way the answer from @s4k1b is also right for the point that why your key is not working. — User 28
– User 28, Commented Jul 13, 2020 at 5:12

s4k1b · Accepted Answer · 2020-07-13 07:15:36Z

5

Your solution won't work because the $route.path string does not contain the query parameters. So, when you change go from "View 1 - Param 2" to "View 1 - Param 1", the $route.path remains same, and does not update the view.

Use $route.fullPath this will update the view as it contains the The full resolved URL including query and hash.

<router-link to="/">Home</router-link> |
<router-link :to="{name: 'View1', params: {myprop: 'hello 1'}}"> |
   View 1 - Param 1
</router-link>
<router-link :to="{name: 'View1', params: {myprop: 'hello 2'}}"> |
   View 1 - Param 2
</router-link>
<router-view :key='$route.fullPath' />

Alternatively, you can add a watcher to the route query parameter inside your "View1.vue". This way you wont have to add key to your router-view

View1.vue

<template>
  <div>
     My prop = {{pageProp}}
  </div>
</template>

<script>
export default {
  data() {
    return {
      pageProp: ""
    }
  },
  watch: {
    "$route.query": {
      immediate: true,
      handler(n) {
        this.pageProp = n.myProp
      }
    }
}
</script>

edited Jul 13, 2020 at 7:15

answered Jul 13, 2020 at 4:18

s4k1b

3,1151 gold badge11 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

crosen9999 Over a year ago

Thank you very much for this information. It turns out that I was not including the prop in my router's path. Once that was added, the code worked as is. (BTW, when I tried the watch routine, I got a syntax error unless I removed the ":" from "handler(n):".

Dr. Nab Raj Roshyara · Accepted Answer · 2021-02-01 07:07:57Z

1

You can use

<router-view :key ='$route.params'/>

instead of using

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

In my case it worked.

answered Feb 1, 2021 at 7:07

Dr. Nab Raj Roshyara

214 bronze badges

Collectives™ on Stack Overflow

Vue.js Router Link Not Updating

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related