例子：vue3+vite+router创建导航菜单

第一部分

1、初始化项目

npm init vite@latest

npm run dev ：运行项目

q+Enter：退出运行

2、安装路由依赖

npm install vue-router@4  # Vue3 对应 vue-router 4.x 版本

第二部分：

创建页面组件

在 src/views 目录下创建三个页面组件：

首页（HomeView.vue）

<template>
  <div class="page home-page">
    <h2>首页</h2>
    <p>这是网站首页内容</p>
  </div>
</template>

<style scoped>
.page {
  padding: 20px;
}
.home-page {
  background-color: #f0f9ff;
}
</style>

关于页（AboutView.vue）

<template>
  <div class="page about-page">
    <h2>关于我们</h2>
    <p>这是关于页面内容</p>
  </div>
</template>

<style scoped>
.page {
  padding: 20px;
}
.about-page {
  background-color: #fff0f0;
}
</style>

文档页（DocView.vue）

<template>
  <div class="page doc-page">
    <h2>文档中心</h2>
    <p>这是文档页面内容</p>
  </div>
</template>

<style scoped>
.page {
  padding: 20px;
}
.doc-page {
  background-color: #f0fff4;
}
</style>

创建导航组件

在 src/components 目录下创建导航栏组件 Navbar.vue

<template>
  <nav class="navbar">
    <!-- 路由链接：点击切换页面，无需刷新 -->
    <router-link to="/" class="nav-item" active-class="active">首页</router-link>
    <router-link to="/about" class="nav-item" active-class="active">关于</router-link>
    <router-link to="/doc" class="nav-item" active-class="active">文档</router-link>
  </nav>
</template>

<style scoped>
.navbar {
  display: flex;
  padding: 0 20px;
  background-color: #333;
}

.nav-item {
  color: white;
  text-decoration: none;
  padding: 15px 20px;
  transition: background-color 0.3s;
}

.nav-item:hover {
  background-color: #555;
}

/* 激活状态样式（当前选中的导航项） */
.active {
  background-color: #007bff;
}
</style>

配置路由

在 src 目录下创建 router 文件夹，新建 index.ts 路由配置文件：

// src/router/index.ts
import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router'
// 导入页面组件
import HomeView from '../views/HomeView.vue'
import AboutView from '../views/AboutView.vue'
import DocView from '../views/DocView.vue'

// 路由规则
const routes: RouteRecordRaw[] = [
  {
    path: '/', // 首页路径
    name: 'Home',
    component: HomeView
  },
  {
    path: '/about', // 关于页路径
    name: 'About',
    component: AboutView
  },
  {
    path: '/doc', // 文档页路径
    name: 'Doc',
    component: DocView
  }
]

// 创建路由实例
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL), // 基于 HTML5 History 模式
  routes // 注入路由规则
})

export default router

修改根组件（App.vue）

整合导航栏和路由出口（路由匹配的页面会在这里渲染）：

<!-- src/App.vue -->
<template>
  <div class="app">
    <!-- 导航栏 -->
    <Navbar />
    <!-- 路由出口：当前匹配的页面组件会渲染在这里 -->
    <router-view />
  </div>
</template>

<script setup lang="ts">
// 导入导航栏组件
import Navbar from './components/Navbar.vue'
</script>

<style scoped>
.app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
</style>

配置入口文件（main.ts）

确保已正确挂载路由（通常初始化项目时已配置，确认即可）：

// src/main.ts
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router/index' // 导入路由配置

createApp(App)
  .use(router) // 挂载路由
  .mount('#app')

运行效果

清空项目自带的src/style.css文件，执行 npm run dev 启动项目，访问 http://localhost:5173 会看到：

顶部有黑色导航栏，包含「首页」「关于」「文档」三个链接
点击不同链接，下方内容区域会切换对应的页面（无需刷新）
当前选中的导航项会显示蓝色背景（active-class 效果）

项目笔记

1、<router-view />

当在项目中配置了路由规则（通常在 router/index.ts 或类似文件中），定义了不同路径对应哪个组件时，<router-view /> 会根据当前浏览器的 URL 路径，自动匹配对应的组件，并将该组件渲染到 <router-view /> 所在的位置。例如，如果你配置了路由规则：

{ path: '/home', component: Home },
{ path: '/about', component: About }

当访问 /home 时，<router-view /> 会渲染 Home 组件

当访问 /about 时，<router-view /> 会渲染 About 组件

在项目的代码结构中，导航栏 <Navbar /> 始终显示在页面上方，而 <router-view /> 则动态展示当前路由对应的页面内容，这样就实现了单页应用（SPA）中页面内容的切换，而无需刷新整个页面。

简单讲，<router-view /> 就像是一个 “占位符”，负责根据当前路由动态替换显示不同的页面组件，是实现 Vue 单页应用路由跳转的核心机制之一。

2、<router-link>

<router-link> 是 Vue Router 提供的用于实现路由跳转的组件，它的主要作用是在单页应用（SPA）中实现页面间的导航，且不会导致整个页面刷新。

具体来说，它有这些特点和作用：

替代传统 <a> 标签：传统的 <a href="/path"> 跳转时会刷新整个页面，而 <router-link to="/path"> 是通过 Vue Router 实现的 “前端路由跳转”，只会更新 <router-view> 中渲染的组件，避免了页面全量刷新，提升用户体验。
自动匹配路由：通过 to 属性指定目标路由路径（如 <router-link to="/home">首页</router-link>），点击后会触发路由切换，<router-view> 会自动渲染对应路径的组件。
激活状态高亮：当 <router-link> 对应的路由处于活跃状态（即当前 URL 匹配该路由）时，会自动添加一个默认的激活类名 router-link-active（可通过配置自定义），方便开发者通过 CSS 实现导航高亮效果。

例如，在导航栏中使用：

<Navbar>
  <router-link to="/home">首页</router-link>
  <router-link to="/about">关于我们</router-link>
</Navbar>

点击 “首页” 时，URL 会变为 /home，<router-view> 渲染 Home 组件，同时 “首页” 对应的 <router-link> 会被添加激活类名，便于样式区分。

总之，<router-link> 是 Vue 单页应用中实现无刷新导航的核心组件，配合 <router-view> 完成路由跳转和组件渲染的联动。

3、main.ts文件中，在执行import时，为什么有的使用了{}，有的没有使用{}

这是因为导入的内容类型不同，导致使用的导入语法有区别 ——{} 用于导入 “命名导出” 的内容，而不加 {} 用于导入 “默认导出” 的内容，具体区别如下：

1. 第一行 `import { createApp } from 'vue'` 用 `{}`：导入 “命名导出”

vue 库中，createApp 是通过命名导出（Named Export）对外暴露的。简单说，Vue 源码中大概是这样定义的：

// vue 内部源码（简化）
export const createApp = function() { ... } // 命名导出（用 export const/function/interface）

对于这种 “命名导出” 的内容，导入时必须用 {} 包裹，且名称必须与导出时完全一致（比如这里必须写 createApp，不能改名字）。

2. 后两行 `import './style.css'` 和 `import App from './App.vue'` 不用 `{}`：

import './style.css'：这是 “导入副作用”，不是导入具体变量 / 组件。CSS 文件没有 “导出” 任何内容，导入它的目的是执行文件中的代码（让 CSS 生效），所以不需要 {}，也不需要指定变量名。
import App from './App.vue'：导入 “默认导出（Default Export）”。App.vue 组件中，通常是通过默认导出（Default Export）对外暴露的，比如：

<!-- App.vue 中 -->
<script setup>
// ...
</script>
<!-- 或传统写法 -->
<script>
export default { ... } // 默认导出（用 export default）
</script>

核心区别总结

导入语法	用于导入哪种导出方式	特点
`import { A } from 'x'`	命名导出（`export const A`）	必须用 `{}`，名称必须与导出时一致
`import B from 'x'`	默认导出（`export default B`）	不用 `{}`，可以自定义导入名称
`import 'x'`	无导出（仅执行文件副作用）	不用 `{}` 和名称，仅让文件代码生效

这种语法规则是 ES6 模块（ESM）的标准规范，Vue、React 等现代前端框架都遵循这一规则。

4、

posted @ 2025-10-20 19:00 超级宝宝11 阅读(6) 评论(0) 收藏举报

刷新页面返回顶部

超级宝宝11