laravel-5 – How to access Vue-Router dynamic route parameter

Question:

Using the vue-router, I came across a problem when I ask for a dynamic route, like

{ path: '/horario/:dia/:hora', component: Bar },

there is a problem, I can't access the day and time values ​​on the destination page, this because it is a template, however, I need this information, I'm using a template file .vue.

He is:

<template>
   <div></div>
</template>

<script>
    export default {
        mounted() {
            console.log(dia);
            console.log(hora);
            console.log('Component mounted.')
        },
        data(){
            return {

            }
        } 
    }
</script>

Answer:

You can access the route parameters via $route this:

mounted() {
    console.log(this.$route.params.dia);
    console.log(this.$route.params.hora);
    console.log('Component mounted.')
},

It is important to note that after params you will call the name you registered in the path (without the colon) , in your case date and time:

• { path: '/time/: day /: hour ', component: Bar }

So the result of the URL /hour/10/20 would be:

mounted() {
    console.log(this.$route.params.dia); // 10
    console.log(this.$route.params.hora); // 20
},