当前位置：首页 > news >正文

Vue基本路由

news 2025/11/10 9:18:46

一、前言

你是否见过这样的网站：点击导航菜单，页面内容变了，但浏览器并没有“刷新”？
这就是 单页应用（SPA） 的典型特征，而实现这种“无刷新跳转”的核心技术，就是——前端路由。

在 Vue 中，我们使用 vue-router 来管理页面之间的跳转。它是 Vue 官方的路由管理器，与 Vue 深度集成，使用非常简单。

本文将带你： ✅ 理解什么是前端路由
✅ 快速搭建一个带路由的 Vue 项目
✅ 掌握 router-link 和 router-view 的基本用法
✅ 实现页面跳转与参数传递

无需任何前置知识，跟着步骤一步步操作，你也能轻松实现页面切换！

二、什么是路由？

在 Web 开发中，“路由”原本是服务器端的概念：根据不同的 URL，返回不同的页面内容。

而在前端，“前端路由”指的是：根据不同的 URL，渲染不同的组件，而不刷新整个页面。

比如：

访问 / → 显示首页
访问 /about → 显示关于页
访问 /user/123 → 显示用户 123 的信息

这一切都在同一个 HTML 页面中完成，用户体验更流畅。

三、创建一个带路由的 Vue 项目

1. 使用 Vue CLI 创建项目（推荐）

# 安装 Vue CLI（如果未安装）
npm install -g @vue/cli# 创建项目
vue create my-project# 进入项目
cd my-project

在创建过程中，选择 “Manually select features”，然后勾选 Router，这样会自动安装并配置 vue-router。

2. 项目结构说明

安装 vue-router 后，项目中会多出以下文件：

src/
├── router/
│   └── index.js        # 路由配置文件
├── views/
│   ├── Home.vue        # 首页组件
│   └── About.vue       # 关于页组件
└── App.vue             # 根组件，包含 router-view

四、基本路由配置

打开 src/router/index.js，你会看到类似代码：

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'// 定义路由规则
const routes = [{ path: '/', component: Home },{ path: '/about', component: About }
]// 创建路由实例
const router = createRouter({history: createWebHistory(), // 使用 history 模式routes
})export default router

✅ 这段代码的意思是：

当 URL 是 / 时，显示 Home 组件
当 URL 是 /about 时，显示 About 组件

五、使用 `<router-view>` 和 `<router-link>`

1. `<router-view>`：路由出口

<router-view> 是一个占位符，匹配到的组件会在这里显示。

打开 App.vue：

<template><div id="app"><h1>我的网站</h1><!-- 导航菜单 --><nav><router-link to="/">首页</router-link> |<router-link to="/about">关于</router-link></nav><!-- 路由组件渲染在这里 --><router-view></router-view></div>
</template><style>
nav a {text-decoration: none;margin: 0 10px;
}
nav a.router-link-exact-active {color: #42b983;font-weight: bold;
}
</style>

2. `<router-link>`：声明式导航

to="/" 表示点击后跳转到 / 路径
它会被渲染为 <a> 标签，但不会刷新页面
当前激活的链接会自动添加 router-link-exact-active 类，可用于样式高亮

六、运行项目

npm run serve

打开浏览器访问 http://localhost:8080，你会发现：

默认显示“首页”内容
点击“关于”，页面内容变为“关于页”，URL 变为 /about，但页面没有刷新！

✅ 恭喜你，已经成功实现了 Vue 的基本路由！

七、动态路由（简单了解）

如果你想根据用户 ID 显示不同内容，比如 /user/1、/user/2，可以使用动态路由。

1. 添加动态路由

// router/index.js
import User from '../views/User.vue'const routes = [// ... 其他路由{ path: '/user/:id', component: User } // :id 是动态参数
]

2. 在组件中获取参数

<!-- views/User.vue -->
<template><div><h2>用户详情</h2><p>当前用户ID：{{ $route.params.id }}</p></div>
</template><script>
export default {mounted() {console.log('用户ID:', this.$route.params.id)}
}
</script>

现在访问 /user/123，页面会显示 “当前用户ID：123”。

八、编程式导航（用 JS 跳转）

除了点击链接，你也可以用 JavaScript 控制跳转。

<template><div><button @click="goHome">回到首页</button><button @click="goAbout">去关于页</button></div>
</template><script>
export default {methods: {goHome() {this.$router.push('/')},goAbout() {this.$router.push('/about')}}
}
</script>

this.$router.push(path)：跳转到指定路径
this.$router.back()：后退一页

九、常见问题

❓ 页面跳转后，浏览器地址栏没变化？

检查是否正确引入了 router：

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'  // 引入路由createApp(App).use(router).mount('#app') // 使用路由

❓ 刷新页面出现 404？

如果你使用的是 history 模式（正常 URL），需要服务器配置支持，否则刷新会 404。
开发环境下不会有问题，生产部署时需配置服务器（如 Nginx）将所有请求指向 index.html。

十、总结

概念	作用
`vue-router`	Vue 的官方路由管理器
`<router-link>`	用于跳转的链接，不会刷新页面
`<router-view>`	匹配的组件会在这里显示
`routes`	定义路径与组件的映射关系
`$route.params`	获取动态路由参数
`this.$router.push()`	用 JS 跳转页面