Vue router issue

Question

I have a link like below in a vue component file.

<li v-for="(word,index) in allWord" v-bind:key="index">
    <router-link :to="{ name: 'word', params: {id: word.id } }">
       {{word}}
    </router-link> 
</li>

My route settings in index.js file is like below

export default new Router({
    mode: 'history',
    routes: [
        {   
            path: '/',          
            component: MainBody 
        },
        {   path: '/word/:id',
            name: 'word',   
            component: Word 
        }
    ]
});

I am getting URL like below

http://localhost:8080/word/4

I am trying to catch URL parameter in word.vue is like below

<script>
    export default {
        watch: {
            '$route': 'routeChanged'
        },
        methods: {
            routeChanged () {
                console.log(this.$route.params.id);
            }
        }
    }
</script>

The issue is when I click on the <li></li> I am not getting any value in console, I am getting value when I click second time.

Why it is happening ? I would like to get value first time.

Ferrybig · Accepted Answer · 2018-07-09 11:39:46Z

1

Your issue is caused by that fact that you are watching changes. To better understand this issue, here is a timeline:

User clicks "http://localhost:8080/word/4"
Vue router updates $route
Router view updates the view, swapping out MainBody for Word, updates the props passed and calls created and mounted

Since from the view of word, nothing has changed, it doesn't calls the watch

Manually parsing $route from any method isn't the cleanest solution, better is just to use the props in combination with the watcher to get your id:

<script>
    export default {
        props: {
             id: String,
        },
        created() {
             this.routeChanged();
        },
        watch: {
            'id': 'routeChanged',
        },
        methods: {
            routeChanged () {
                console.log(this.id);
            },
        },
    };
</script>

Make sure to specify props: true in your router if using this:

    {   path: '/word/:id',
        name: 'word',   
        component: Word,
        props: true,
    },

answered Jul 9, 2018 at 11:39

Ferrybig

19k6 gold badges63 silver badges87 bronze badges

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

4 Comments

abu abu Over a year ago

Thanks @Ferrtbig. Your solution is working properly. Thanks.

abu abu Over a year ago

I am getting route undefined message when I first load http://localhost:8080/. Why it is printing ?

Ferrybig Over a year ago

I wasn't clear in my answer, the <script> section should be added to word.vue, not mainbody.vue

abu abu Over a year ago

Thanks @Ferrybig. I added <script> section to word.vue. Thanks.

niclas_4 · Accepted Answer · 2018-07-09 11:34:45Z

1

I suggest you to catch the value in the mounted() and updated().

methods: {
  getid: function()
  {
     this.wordid = this.$route.params.id
  } 
},

watch: {
  wordid: function(val) {
    console.log(this.wordid) // or console.log(val)
  }
},
mounted()
{
   this.getid()
},
updated()
{
 this.getid()
}

answered Jul 9, 2018 at 11:34

niclas_4

3,6761 gold badge25 silver badges51 bronze badges

2 Comments

abu abu Over a year ago

Thanks @Badgy. Your solution is working just my opposite. First time it is printing the id but not from second time.

niclas_4 Over a year ago

@abuabu Ok sorry then for wasting your time with a wrong solution, im glad someone else had the right idea :)

Collectives™ on Stack Overflow

Vue router issue

2 Answers 2

4 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related