Create a Tweet/SingleTweet.vue file inside src/components/Tweet and paste the code below in it:

// src/components/Tweet/SingleTweet.vue

<template>
    <div class="ui stackable two column centered vertically padded grid container">
        <div class="column">
            <a class="ui button mini primary" @click="back">Back</a>
            <div class="ui feed">
                <div class="event">
                    <div class="label">
                        <img src="https://www.gravatar.com/avatar/default?s=200&r=pg&d=mm">
                    </div>
                    <div class="content">
                        <div class="summary">
                            <router-link :to="`/${tweet.user.username}`">
                                {{ tweet.user.name }}
                                <small>{{ `@${tweet.user.username}` }}</small>
                            </router-link>
                        </div>
                        <div class="extra text">
                            {{ tweet.tweet }}
                        </div>

                    </div>
                </div>
            </div>
            <div class="ui divider"></div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'SingleTweet',
        data () {
            return {
                tweet: ''
            }
        },
        created () {
            this.fetchTweet()
        },
        methods: {
            fetchTweet () {
                axios.get(`/tweets/${this.$route.params.id}`).then(response => {
                    this.tweet = response.data.data
                })
            },
            back () {
                this.$router.go(-1)
            }
        }
    }
</script>

The component is pretty straightforward. It fetches and displays a tweet. The fetchTweet method makes a GET request to the /tweets/:id endpoint of our API, where :id is the ID of the tweet we want to fetch. The route parameters are available in this.$route.params. So, to get the id parameter we do this.$route.params.id. Also, we implement a back method using Vue router's go method to take users back to the previous page.

Adding View Tweet Route

Open src/router/index.js, and add the code below to it:

Table of Contents

    // src/router/index.js
    
    import SingleTweet from '@/components/Tweet/SingleTweet'
    
    // add these inside the `routes` array
    {
        path: '/:username/status/:id',
        component: SingleTweet,
        props: true
    },

    By adding props: true, we want the route paramters (username and id) to be used as component props.

    Tips: This route should be the very last in the list of routes due to the fact that it a wildcard route. Subsequent routes will be added above it.

    We should be able to click on a tweet to view it now:

    Chimezie Enyinnaya

    16 posts

    Software Developer [PHP Laravel JavaScript NodeJS AdonisJS VueJS] | movie lover | run http://openlaravel.com