feat: 20250610 路由配置

.eslintrc.cjs

@@ -24,18 +24,25 @@ module.exports = {
   },
   plugins: ['vue', 'prettier', '@typescript-eslint'], // 显式注册所有插件
   rules: {
-    'vue/no-undef-components': 'error',
+    // 允许使用 router-link 和 router-view 组件
+    'vue/no-undef-components': [
+      'error',
+      {
+        ignorePatterns: ['router-link', 'router-view']
+      }
+    ],
     // 针对非 Vue 文件禁用 Vue 规则
     // 'vue/no-unregistered-components': [
     //   'error',
     //   { ignorePatterns: ['^router$', '^store$'] } // 可选：忽略特定组件名称
     // ],
-    'vue/multi-word-component-names': [
+    'vue/multi-word-component-names': 'off',
-      'error',
+    // 'vue/multi-word-component-names': [
-      {
+    //   'error',
-        ignores: ['Test'] // 可选：忽略特定组件名
+    //   {
-      }
+    //     ignores: ['Test'] // 可选：忽略特定组件名
-    ],
+    //   }
+    // ],
 
     // 其他自定义规则
     'prettier/prettier': 'error',

src/App.vue

@@ -1,33 +1,42 @@
-<script setup lang="ts">
-import HelloWorld from './components/HelloWorld.vue'
-</script>
-
 <template>
-  <div>
+  <div id="app">
-    <!--    <NonExistentComponent />-->
+    <!-- 导航栏 -->
-    <a href="https://vite.dev" target="_blank">
+    <nav>
-      <img src="/vite.svg" class="logo" alt="Vite logo" />
+      <ul>
-    </a>
+        <li><router-link to="/">首页</router-link></li>
-    <a href="https://vuejs.org/" target="_blank">
+        <li><router-link to="/about">关于我们</router-link></li>
-      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
+      </ul>
-    </a>
+    </nav>
+
+    <!-- 路由出口：渲染当前页面 -->
+    <main>
+      <router-view />
+    </main>
   </div>
-  <HelloWorld msg="Vite + Vue" />
 </template>
 
-<style scoped>
+<script setup lang="ts">
-.logo {
+// App 组件逻辑
-  height: 6em;
+</script>
-  padding: 1.5em;
+
-  will-change: filter;
+<style>
-  transition: filter 300ms;
+nav ul {
+  display: flex;
+  list-style: none;
+  padding: 0;
 }
 
-.logo:hover {
+nav li {
-  filter: drop-shadow(0 0 2em #646cffaa);
+  margin-right: 1rem;
 }
 
-.logo.vue:hover {
+nav a {
-  filter: drop-shadow(0 0 2em #42b883aa);
+  text-decoration: none;
+  color: #333;
+}
+
+nav a.router-link-exact-active {
+  color: #007bff;
+  font-weight: bold;
 }
 </style>

src/main.ts

@@ -1,6 +1,18 @@
-import { createApp } from 'vue'
+// src/main.ts
-import './style.css'
+import { ViteSSG } from 'vite-ssg'
+import { createWebHistory } from 'vue-router'
 import App from './App.vue'
-import './styles/reset.css' // 引入重置样式
+import routes from './router/routes'
+import './style.css'
 
-createApp(App).mount('#app')
+export const createApp = ViteSSG(
+  App,
+  {
+    history: createWebHistory(),
+    routes
+  },
+  ctx => {
+    // 确保路由插件被安装
+    ctx.app.use(ctx.router) // 关键修改点
+  }
+)

src/router/index.ts

@@ -0,0 +1,20 @@
+// src/router/index.ts
+import { createRouter, createWebHistory } from 'vue-router'
+import routes from './routes'
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+  scrollBehavior(_to, _from, savedPosition) {
+    // 添加下划线标记未使用参数
+    return savedPosition || { top: 0 }
+  }
+})
+
+router.beforeEach((_to, _from, next) => {
+  // 添加下划线
+  // document.title = to.meta.title || '极简官网' // 确保meta.title类型正确
+  next()
+})
+
+export default router

src/router/routes.ts

@@ -0,0 +1,31 @@
+// src/router/routes.ts
+import type { RouteRecordRaw } from 'vue-router' // 添加type关键字
+import Home from '@/views/Home.vue'
+import About from '@/views/About.vue'
+
+const routes: RouteRecordRaw[] = [
+  {
+    path: '/',
+    name: 'Home',
+    component: Home,
+    meta: {
+      title: '首页 - 极简官网' // 明确指定title为string类型
+    } as { title: string } // 强制类型断言
+  },
+  {
+    path: '/about',
+    name: 'About',
+    component: About,
+    meta: {
+      title: '关于我们 - 极简官网'
+    } as { title: string }
+  },
+  {
+    path: '/:pathMatch(.*)*',
+    name: 'NotFound',
+    component: () => import('@/views/NotFound.vue'),
+    meta: { title: '404 - 页面不存在' } as { title: string }
+  }
+]
+
+export default routes

src/views/About.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="about-page">
+    <h1>关于我们</h1>
+    <p>我们是一家专注于极简设计的科技公司。</p>
+    <router-link to="/">返回首页</router-link>
+  </div>
+</template>
+
+<script setup lang="ts">
+// 关于页逻辑
+</script>
+
+<style scoped>
+.about-page {
+  padding: 2rem;
+  text-align: center;
+}
+</style>

src/views/Contact.vue

@@ -0,0 +1,7 @@
+<template>
+  <div class="contact-page">
+    <h1>联系我们</h1>
+    <p>联系方式...</p>
+  </div>
+</template>
+<script lang="ts" setup></script>

src/views/Home.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="home-page">
+    <h1>欢迎来到极简官网</h1>
+    <p>这是首页内容，展示公司核心信息。</p>
+    <router-link to="/about">了解更多关于我们</router-link>
+  </div>
+</template>
+
+<script setup lang="ts">
+// 首页逻辑（可添加数据请求等）
+</script>
+
+<style scoped>
+.home-page {
+  padding: 2rem;
+  text-align: center;
+}
+</style>

src/views/NotFound.vue

@@ -0,0 +1,9 @@
+<!-- src/views/NotFound.vue -->
+<template>
+  <div>
+    <h1>404 - 页面不存在</h1>
+    <router-link to="/">返回首页</router-link>
+  </div>
+</template>
+
+<style scoped></style>

tsconfig.node.json

@@ -6,9 +6,10 @@
       "ES2022",
       "DOM",
     ],
+    "baseUrl": "./",
     "paths": {
       "@/*": [
-        "./src/*"
+        "src/*"
       ]
       // 添加路径别名
     },