vue的路由一般都是怎么写的

router/index.ts

第一种

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/home/index.vue'
import CallView from '../callback.vue'
import LogoutView from '../logout.vue'
import silentView from '../silent.vue'
import AboutView from '../views/about/index.vue'

const router = createRouter({
    history: createWebHistory(import.meta.env.BASE_URL),
    routes: [
        {
            path: '/',
            redirect: '/home'
        },
        {
            path: '/home',
            name: 'home',
            component: HomeView
        },
        {
            path: '/about',
            name: 'about',
            component: AboutView
        },
        {
            path: '/callback',
            name: 'Callback',
            component: CallView
        },
        {
            path: '/logout',
            name: 'Logout',
            component: LogoutView
        },
        {
            path: '/silent',
            name: 'Silent',
            component: silentView
        },{
            path: '/404',
            component: () => import("@/views/404.vue"),
          },
          {
            path:"/:pathMatch(.*)",
            redirect:'/404'
        }
    ],
    strict: false,
    scrollBehavior: () => ({ left: 0, top: 0 })
})

router.beforeEach((to, from, next) => {
    document.body.scrollTop = 0
    // firefox
    document.documentElement.scrollTop = 0
    next()
})

export default router

第二种

import { createRouter, createWebHistory } from "vue-router";

const baseRouter = []

const otherRouter = [
    {
        path: '/',
        redirect: "/home"
    },
    {
        path: "/home",
        name: 'home',
        component: () => import("@/views/home/index.vue"),
        meta: {
            title: "首页"
        }
    },
    {
        path: '/meeting',
        name: 'meeting',
        component: () => import("@/views/meeting/index.vue"),
        meta: {
            title: "会议通知"
        }
    },
    {
        path: "/meeting/details",
        name: "meetingDetails",
        component: () => import("@/views/meeting/details/index.vue"),
        meta: {
            title: "会议详情"
        }
    },
    {
        path: '/training',
        name: 'training',
        component: () => import("@/views/training/index.vue"),
        meta: {
            title: "培训通知"
        }
    },
    {
        path: "/training/details",
        name: "trainingDetails",
        component: () => import("@/views/training/details/index.vue"),
        meta: {
            title: "培训详情"
        }
    },
    {
        path: '/videos',
        name: 'videos',
        component: () => import("@/views/videos/index.vue"),
        meta: {
            title: "视频展示"
        }
    },
    {
        path: "/videos/details",
        name: "videosDetails",
        component: () => import("@/views/videos/details/index.vue"),
        meta: {
            title: "视频详情"
        }
    },
    {
        path: '/news',
        name: 'news',
        component: () => import("@/views/news/index.vue"),
        meta: {
            title: "新闻资讯"
        }
    },
    {
        path: "/news/details",
        name: "newsDetails",
        component: () => import("@/views/news/details/index.vue"),
        meta: {
            title: "资讯详情"
        }
    },
    {
        path: "/center",
        name: 'center',
        component: () => import("@/views/center/index.vue"),
        meta: {
            title: "中心介绍"
        }
    },
    {
        path: '/search',
        name: 'search',
        component: () => import('../views/search/index.vue')
      },
    {
        path: "/callback",
        name: "callback",
        component: () => import("@/views/callback.vue"),
    },
    {
        path: "/logout",
        name: "logout",
        component: () => import("@/views/logout.vue"),
    },
    {
        path: "/silent",
        name: "silent",
        component: () => import("@/views/silent.vue"),
    },
    {
        path: '/404',
        component: () => import("@/views/404.vue"),
      },
      {
        path:"/:pathMatch(.*)",
        redirect:'/404'
    }
]

const routes = [...baseRouter, ...otherRouter]

const router = createRouter({
    history: createWebHistory(import.meta.env.BASE_URL),
    routes,
    strict: false,
    scrollBehavior: () => ({ left: 0, top: 0 })
});

export default router;