Vue JS 2 TutorialEpisode 42

Route Parameters

Pass dynamic parameters in routes — create a blog detail page accessed via /blog/:id and read the parameter in the component.

Route Parameters

To display individual items (like a single blog post), you need dynamic route segments. Route parameters let you capture values from the URL and use them in your component.

Defining a Dynamic Route

// router.js
{ path: '/blog/:id', component: SingleBlog }

The :id segment is a dynamic parameter. It matches any value: /blog/1, /blog/abc, /blog/42.

Accessing the Parameter

<!-- SingleBlog.vue -->
<script>
export default {
    data() {
        return { blog: {} };
    },
    created() {
        const id = this.$route.params.id;
        this.$http.get('https://jsonplaceholder.typicode.com/posts/' + id)
            .then(response => {
                this.blog = response.body;
            });
    }
};
</script>

this.$route.params.id gives you the value from the URL. If the URL is /blog/5, then params.id is '5'.

Linking to Dynamic Routes

<router-link :to="'/blog/' + blog.id">{{ blog.title }}</router-link>

<!-- Or with named routes -->
<router-link :to="{ name: 'SingleBlog', params: { id: blog.id } }">
    {{ blog.title }}
</router-link>

Key Takeaways

Define dynamic segments with :paramName in the route path
Access parameters with this.$route.params.paramName
Use dynamic routing for detail pages, user profiles, and any resource-specific views