Vue 路由示例 - 技术栈

main.ts

javascript 复制代码

import { createApp } from 'vue'
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/reset.css'
import './style.css'
import App from './App.vue'
import { createRouter, createWebHashHistory } from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'

// 定义路由（使用 .vue 组件，在构建时预编译，无需运行时模板编译） 
//内联 template
//const Home = { template: '<div><h2>🏠 首页</h2><p>这是应用的主页内容。</p></div>' }
//const About = { template: '<div><h2>ℹ️ 关于我们</h2><p>这是一个使用 Vue 3 和 Vue Router 4 构建的单页应用 (SPA) 示例。</p></div>' }
 
const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
]

// 3. 创建路由实例并传递 `routes` 配置
const router = createRouter({
  // 使用 hash 模式，因为纯 HTML 文件不需要服务器配置支持
  history: createWebHashHistory(),
  routes,
})

const app = createApp(App)
app.use(Antd)
app.use(router)
// 等待路由就绪后再挂载，确保 router-view 能正确渲染
router.isReady().then(() => {
  app.mount('#app')
})

/**
 * 
 工作原理
import Antd from 'ant-design-vue'：导入 ant-design-vue 的完整库。
app.use(Antd)：把 Antd 注册到 Vue 应用上，相当于一次性注册了所有组件（如 a-row、a-col、a-button、a-form 等）。
全局可用：注册后，所有子组件（包括 layoutdemo.vue）都可以在模板里直接使用这些组件，无需再单独 import。
总结
ant-design-vue 是在 src/main.ts 中通过 app.use(Antd) 全局注册的，所以 layoutdemo.vue 里可以直接使用 a-row、a-col 等组件。
 * 
 */

App.vue

javascript 复制代码

<template>
  <div>
    <h1>Vue Router 示例</h1>

    <h1>Hello App!</h1>
    <nav>
      <RouterLink to="/" active-class="active-link">Go to Home！ </RouterLink>
      <RouterLink to="/about" active-class="active-link">Go to About</RouterLink>
    </nav>

    <div class="router-view-content">
      <RouterView />
    </div>
  </div>
</template>

<style>
/* 简单的激活样式 */
.active-link {
  font-weight: bold;
  color: #42b983; /* Vue 绿色 */
}
/* 调整链接间距 */
nav a {
  margin: 0 5px;
  text-decoration: none;
}
</style>

<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'
</script>

Vue 在 Vite 下默认使用 runtime-only 构建，不支持在运行时编译模板字符串。

原来在 main.ts 里用内联 template：

const Home = {

template: '<div><h2>🏠 首页</h2>...</div>', // 需要运行时编译

}

这种写法需要模板编译器，而默认构建里没有，所以会报错。