How to define named route in vue js?

Named Routes

Named routes is a most powerfull features of vue js. It is most convenient to identify a route with a name.

Syntax Of Routes.

<router-link class="nav-link" :class="{'active': openMainMenu('/admin/catalog/category') }"
    :to="{ name: 'admin.catalog.category' }">
        <i class="fa fa-circle-o nav-icon"></i>
    <p>Manage Category</p>
</router-link>

import Vue from "vue";
import App from "./App.vue";
import VueRouter from "vue-router";
import { ContentLoader } from "vue-content-loader";
import VueRouteMiddleware from "vue-route-middleware";


Vue.config.productionTip = false;

Vue.use(VueRouter);

import CategoryList from "../../src/components/admin/catalog/category/List";

var mainRoute = [
    {
        path: "category",
        component: CategoryList,
        name: "admin.catalog.category", // here define named routes. 
        meta: {
            middleware: [AuthMiddleware],
        },
    },
];

const router = new VueRouter({
    mode: "history",
    base: __dirname,
    routes: mainRoute,
    linkActiveClass: "active",
    linkExactActiveClass: "exact-active",
});

router.beforeEach(VueRouteMiddleware({ GuestMiddleware }));

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