How to access Vue-Router dynamic route parameter

Question

How to access Vue-Router dynamic route parameter

Navigation

#1 by (0 votes)

3

Using the vue-router, I came across a problem, when a dynamic route, type

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

A problem occurs, I can not access the day and time values on the destination page, this is because it is a template, however, I need this information, I am 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>

vue.js laravel-5 template

asked by anonymous 08.06.2017 / 05:09

1 answer

How to convert date in dd / mm / yyyy format? How to get traffic information in real time, like Waze? [closed]

score 0 · Answer 1

You can access route parameters through $route , like this: / p>

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 that you registered on the path (without the colon) , in your case day and time:

{path: '/ schedule /: day /: time ', component: Bar}

Soon the result of the URL / schedule / 10/20 would be:

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