How To Pass Route Params And Get Route Params From The URL In Vue Js

  • 27-06-2022
  • 640
  • Vue
  • Haresh Chauhan

Vue routing provides us single a page application with vue + vue routes feels nature. route links connect all components to each other very nicely.

routes-links provide links to exchange components from one to another.

But sometimes we need to link other components with some identity so that component fetches data from that identity to dynamic data from the API.

To pass out identity we just need to pass that unique identity to other component from the route-link "to" attribute. this we called params.

These params having in different forms like integer, string, boolean, etc.

So in this post, you will learn how to pass params in other components using route-links it should be id or slug and other params.

Simple ID Pass To Param.

This is a simple id pass in params using route links to attribute. You can see in this below code how I passed.

After passing id into the route link. I defined that route in the routes.js file. The full demo example below is given. Then i fetch that route id from the URL using this.$route.params.id.

<router-link class="btn btn-info" :to="post/1">Read full article</router-link>

const routes = [
    { path: '/post/:id', component: PostView },
];

return {
    id : this.$route.params.id, //  GET ID FROM PARAMS
}

This id I have received in another component, Now I can take action in that component with that id.

Looping ID Pass To Params

This is the same route-link id passed in param but here I used it in the loop. This is used when you are working with the data table. when want to edit data or delete data from the table.

If you are in a looping link:

<tr>
    <tr v-for="(post,index) in posts" :key="index"> // LOOP
    <td>{{ post.id }}</td>
    <td>{{ post.title }}</td>
    <td>
        <router-link class="btn btn-info" :to="'post/' + post.id">Read full article</router-link>
    </td>
</tr>

const routes = [
    { path: '/post/:id', component: PostView },
];

return {
    id : this.$route.params.id, //  GET ID FROM PARAMS
}

This generates each route link with the component dynamic id. then this id will append from the loop.

Slug Param Pass

If you want to pass slug instead of id it will something link below example given.

Fetch slug:

<router-link class="btn btn-info" :to="post/how-to-fetch-slug-from-route-vue">Read full article</router-link>

const routes = [
    { path: '/post/:slug', component: PostView },
];

return {
    id : this.$route.params.slug, //  GET SLUG FROM PARAMS
}

This will pass a slug from the route-link.

Read Full Example

OUTPUT PREVIEW:

Post Listing :

image

Post View :

image

Post Listing

This is my post list component where I listed all my posts.

When created() method will fire an API and fetch a list from the API and looping in the table and list.

Then if a user wants to read the full article then they will click to "Read full article".

src/components/PostList.vue

<template>
    <table border style="margin:auto">
        <thead>
            <tr>
                <th>ID</th>
                <th>Title</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(post,index) in posts" :key="index">
                <td>{{ post.id }}</td>
                <td>{{ post.title }}</td>
                <td><router-link class="btn btn-info" :to="'post/'+post.id">Read full article</router-link></td>
            </tr>
        </tbody>
    </table>
</template>
<script>

export default {
    name:'PostList',

    data(){
        return {
            posts:[]
        }
    },

    created(){
        this.axios.get('https://jsonplaceholder.typicode.com/posts').then((response) => {
            this.posts = response.data;
        })
    }
}
</script>

Post View

After clicking "Read full article" they will redirect to a single post read.

This single post will fetch from the clicked id, This will to API and API will return that specific id post with full contents.

You can see this in this demo example. How I get id from the URL this.$route.params.id.

src/components/PostView.vue

<template>
    <div>
        <h5>{{ postById.title }}</h5>
        <p>{{ postById.body }}</p>
    </div>
</template>
    
<script>
export default {
    name: 'PostView',

    data(){
        return {
            id : this.$route.params.id, //  GET ID FROM PARAMS
            postById:'',
        }
    },

    created(){

        this.axios.get('https://jsonplaceholder.typicode.com/posts/1').then((response) => {
            this.postById = response.data
        })    
    }
}
</script>

Routes File

Routes file where I define all my project routes and there links.

src/routes/routes.js

import HomeDashbaord from './components/HomeDashbaord'
import RegistrationForm from './components/RegistrationForm'
import ContactForm from './components/ContactForm'
import PostList from './components/PostList'
import PostView from './components/PostView'

const routes = [
    { path: '/', component: HomeDashbaord },
    { path: '/registration', component: RegistrationForm },
    { path: '/contact', component: ContactForm },
    { path: '/post', component: PostList },
    { path: '/post/:id', component: PostView },
];

export default routes;

Main Js File

Routes package installed and imported.

src/main.js

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router';
import routes from './routes';
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueRouter);
Vue.use(VueAxios, axios)

const router = new VueRouter({
    mode: 'history',
    routes
});

Vue.config.productionTip = false

new Vue({
    router,
    render: h => h(App),
}).$mount('#app')

We always thanks to you for reading our blogs.


dharmesh-image

Dharmesh Chauhan

(Swapinfoway Founder)

Hello Sir, We are brothers origin from Gujarat India, Fullstack developers working together since 2016. We have lots of skills in web development in different technologies here I mention PHP, Laravel, Javascript, Vuejs, Ajax, API, Payment Gateway Integration, Database, HTML5, CSS3, and Server Administration. So you need our service Please Contact Us

haresh-image

Haresh Chauhan

(Co-Founder)


We Are Also Recommending You :