Post Detail

Title pada halaman sebuah web sangat diperlukan karena title pada halaman menunjukan detail dari sebuah halaman, nah caranya supaya tiap halaman berubah-rubah otomatis maka kita bisa menggunakan fungsi route pada vuejs. Contoh nya seperti berikut ini

import { createRouter, createWebHistory } from 'vue-router'
import { isUserLoggedIn } from '../src/auth/utils'

const routes = [
    {
        path: '/login',
        name: 'login',
        component: () => import ("./views/Login.vue"),
        meta: {
            title: 'Login'
        }
    },
]

const router = createRouter({
    history: createWebHistory(),
    routes
})

router.beforeEach((to, from, next) => {
    const isLoggedIn = isUserLoggedIn();
    if(to.path === '/login' || to.path === '/'){
        if(isLoggedIn !== null){
            next('/dashboard')
        }
    }else{
        if (isLoggedIn !== null) {
            next()
        }else{
            next('/login')
        }
    }
    document.title = 'My App - ' + to.meta.title;
    next();
});

export default router;

Nah bisa kita lihat ada tambahan properti pada route yaitu properti meta dan kita kasih object title yang dimana nanti tergantung masing - masing dari routenya.

        meta: {
            title: 'Login'
        }

Dengan meta tersebut dan juga ada tambahan kodingan di beforeEach routenya

document.title = 'My App - ' + to.meta.title;

Maka contoh outputnya title sebuah halaman ketika kita mengakses route /login akan ada title seperti ini.

Demikianlah artikel pendeknya, semoga bermanfaat