ToolBox/src/router/index.js

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import { getPageTitle } from '../config/site.js'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    meta: {
      titleSuffix: null
    }
  },
  {
    path: '/json-formatter',
    name: 'JsonFormatter',
    component: () => import('../views/JsonFormatter.vue'),
    meta: {
      titleSuffix: 'JSON'
    }
  },
  {
    path: '/comparator',
    name: 'Comparator',
    component: () => import('../views/Comparator.vue'),
    meta: {
      titleSuffix: '对比'
    }
  },
  {
    path: '/encoder-decoder',
    name: 'EncoderDecoder',
    component: () => import('../views/EncoderDecoder.vue'),
    meta: {
      titleSuffix: '编解码'
    }
  },
  {
    path: '/variable-name',
    name: 'VariableNameConverter',
    component: () => import('../views/VariableNameConverter.vue'),
    meta: {
      titleSuffix: '变量名'
    }
  },
  {
    path: '/qr-code',
    name: 'QRCodeGenerator',
    component: () => import('../views/QRCodeGenerator.vue'),
    meta: {
      titleSuffix: '二维码'
    }
  },
  {
    path: '/timestamp-converter',
    name: 'TimestampConverter',
    component: () => import('../views/TimestampConverter.vue'),
    meta: {
      titleSuffix: '时间戳'
    }
  },
  {
    path: '/color-converter',
    name: 'ColorConverter',
    component: () => import('../views/ColorConverter.vue'),
    meta: {
      titleSuffix: '颜色'
    }
  }
]

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

router.beforeEach((to, from, next) => {
  document.title = getPageTitle(to.meta.titleSuffix)
  next()
})

export default router