本文共 2079 字，大约阅读时间需要 6 分钟。

使用vue-router，以下是基于TypeScript的路由配置文件和使用方法说明

路由配置文件（Index.ts）：

import { createRouter, createWebHistory, ErrorHandler } from 'vue-router'
// 定义路由数组
const routes = [
  {
    path: '/404',
    name: '404',
    component: () => import('@/views/404.vue')
  },
  {
    path: '/admin',
    redirect: '/admin/home',
    name: 'admin',
    component: () => import('@/views/admin.vue'),
    children: [
      {
        path: 'home',
        name: 'home',
        meta: { requireAuth: true },
        component: () => import('@/views/admin/Home.vue')
      },
      {
        path: 'setting',
        name: 'setting',
        meta: { requireAuth: true },
        component: () => import('@/views/admin/Setting.vue')
      }
    ]
  },
  {
    path: '/pc',
    redirect: '/pc/index',
    name: 'pc',
    component: () => import('@/views/pc.vue'),
    children: [
      {
        path: 'index',
        name: '首页',
        component: () => import('@/views/pc/Home.vue')
      }
    ]
  },
  {
    path: '/phone',
    redirect: '/phone/pindex',
    name: 'phone',
    component: () => import('@/views/phone.vue'),
    children: [
      {
        path: 'pindex',
        name: 'Home',
        component: () => import('@/views/phone/Home.vue')
      }
    ]
  }
]
const router = createRouter({
  history: createWebHistory('/'),
  routes: routes
})
router.beforeEach((guard) => {
  beforeEach.checkAuth(guard, router)
})
router.onError((handler: ErrorHandler) => {
  console.log('error:', handler)
})
export default router

在页面中使用：

import { useRouter, useRoute } from 'vue-router'
export default {
  name: 'article',
  components: {},
  setup(props, content) {
    const router = useRouter()
    const route = useRoute()
    const data = reactive({
      article_id: route.query.article_id ? route.query.article_id : 0
    })
    const cateSonShow = (cate_id_son: number) => {
      data.cate_id_son = cate_id_son
      router.push({
        path: '/pc/articleList',
        query: {
          cate_id_son: data.cate_id_son
        }
      })
    }
  }
}

以上代码实现了路由的配置和使用，支持多种页面类型的路由管理，具体路由信息请参考代码注释。