How to access Vue-Router dynamic route parameter

Asked

Viewed 2,542 times

3

Using the Vue-router, I came across a problem, when I weigh a dynamic route, like 

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

a problem happens, I can access the values of day and time on the target page, this because it is a template, however, I need this information, I am using a template file . see.

He is:

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

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

            }
        } 
    }
</script>
laravel-5 template vue.js

  • You know how to compile files .vue in a single for Vue to use? Then inside the component just use the $route, for example within the mounted you may have console.log(this.$route.params);

  • I know, however, the numbers are as follows, ":n", where n is the number, I would just like to have n without parsing.

  • Can you set an example to replicate that? I’m doubtful if I understand the problem.

  • Solved, I was using a link in the form of http://(link_site)/time/:3/:4, and only needed the number

1 answer

1

You can access the route parameters through the $route, thus:

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 two points), in your case day and time:

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

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

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

Browser other questions tagged laravel-5 template vue.js

You are not signed in. Login or sign up in order to post.