当前位置：网站首页 > 技术文章 > 正文

那个 Vue 的路由，路由是干什么用的?

myzbx 2025-07-07 21:47 2 浏览

在Vue里，路由就像“页面导航的指挥官”，专门负责管理页面（组件）的切换和显示逻辑。简单来说，它能让单页应用（SPA）像多页应用一样实现“不同URL对应不同页面”的效果，但整个过程不会刷新网页。

一、路由的核心作用：让SPA有“页面感”

- 传统多页应用：每个URL对应一个独立HTML文件（如 /home.html 、 /about.html ），切换页面时需重新加载整个网页。

- Vue单页应用：整个项目只有一个HTML文件，路由通过监听URL变化，动态替换页面中的组件（比如从“首页组件”切换到“关于我们组件”），实现无刷新的页面切换。

二、路由管理的具体内容

1. 管理URL与组件的映射关系

- 定义“路由表”：告诉路由“当URL是 /home 时，显示首页组件；URL是 /user 时，显示用户中心组件”。

// 示例路由表

const routes = [

{ path: '/home', component: HomeComponent },

{ path: '/user', component: UserComponent }

]

2. 管理页面切换的动画与逻辑

- 支持切换时的过渡动画（如淡入淡出、滑动效果），提升用户体验；

- 可在切换前添加“守卫”（类似安检），比如检查用户是否登录：

// 登录验证守卫

router.beforeEach((to, from, next) => {

if (to.path === '/user' && !isLoggedIn) {

next('/login') // 未登录则跳转到登录页

} else {

next() // 允许跳转

}

})

3. 管理路由参数与查询参数

- 参数（params）：嵌入在URL中的动态值，如 /user/123 里的 123 是用户ID，组件中可直接获取；

- 查询参数（query）：类似 /search?keyword=vue 中的 keyword ，常用于搜索条件传递。

4. 管理历史记录与导航

- 支持浏览器的前进/后退按钮操作（通过HTML5的History API实现）；

- 提供API让组件主动跳转（如 this.$router.push('/home') ）或返回上一页（ this.$router.back() ）。

三、路由与“页面管理”的关系

- 本质区别：路由管理的不是“页面”，而是组件的显示状态。

- 在Vue中，每个“页面”其实是一个组件（如 Home.vue 、 About.vue ），路由通过控制哪个组件显示在页面的 <router-view> 标签中，实现“页面切换”的效果。

- 类比理解：

- 整个网页像一个“舞台”， <router-view> 是舞台中央的“幕布”，路由就是导演，决定让哪个“演员”（组件）站到幕布前表演。

四、常见路由模式：浏览器模式 vs 哈希模式

1. 哈希模式（默认模式，URL带 # ）

- 例如： https://example.com/#/home ， # 后面的部分是路由路径；

- 优势：兼容性强（支持所有浏览器），无需后端配置。

2. 浏览器模式（URL更简洁，无 # ）

- 例如： https://example.com/home ，需后端配合处理URL（否则刷新会404）；

- 优势：URL更美观，适合需要SEO的场景（如官网）。

五、总结：路由的核心价值

- 对用户：实现流畅的页面切换，体验类似多页应用；

- 对开发者：通过组件化和路由逻辑分离，让代码结构更清晰，维护更方便。

JS 条件

上一篇：S235JRH材50x50x3-5mm欧标方管疲劳强度分析
下一篇：switch上最值得玩的五款JRPG（switch最值得玩的大作）

那个 Vue 的路由，路由是干什么用的?

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

说下你的vue项目的目录结构，该怎么划分?

这么牛逼的cursor功能，赶紧用起来

8.7k star，一款超炫酷的动态可视化大屏项目

用上Vue3，你真的变了吗?（vue3 key）

20个免费音乐音效下载网站，无版权素材商业影片也可用

什么是“恒定光圈”，什么是“浮动光圈”?-摄影早自习第331

谷歌SEO:外贸电商网站On-page SEO优化实战「附案例」