Vue 路由的学习

Vue 路由完全指南

Vue路由完全指南：从基础到实战，轻松掌握页面跳转核心

在Vue开发中，路由是实现单页面应用（SPA）页面切换的核心技术。无论是Vue2还是Vue3，路由都扮演着"导航指挥官"的角色，负责管理不同页面的渲染与切换逻辑。本文将基于Vue3+Vue Router 4，从路由基础、核心用法到实战技巧，系统掌握Vue路由的全部关键知识点。

一、路由基础：什么是Vue Router？

Vue Router是Vue官方提供的路由管理器，专门用于实现SPA应用的页面跳转。它的核心作用包括：

• 管理URL与组件的映射关系

• 实现无刷新页面切换（单页面特性）

• 提供路由参数传递、嵌套路由等高级功能

• 支持路由守卫、重定向等路由控制逻辑

Vue3对应的路由版本是Vue Router 4，相比Vue2的Router 3，它在API设计上更贴合Composition API，且支持TypeScript原生集成，性能也有显著提升。

二、环境搭建：Vue3中配置路由

1. 安装依赖

首先确保你的Vue3项目中安装了Vue Router 4：

npm install vue-router@4
# 或 yarn add vue-router@4

2. 基本配置步骤

步骤1：创建路由配置文件

在src目录下新建router/index.ts，配置路由规则：

// src/router/index.ts
import { createRouter, createWebHistory } from 'vue-router'
// 导入路由组件（建议路由组件放在pages/views文件夹）
import Home from '@/pages/Home.vue'
import News from '@/pages/News.vue'
import About from '@/pages/About.vue'// 创建路由实例
const router = createRouter({// 路由模式：history模式（URL无#）history: createWebHistory(),// 路由规则数组routes: [{path: '/home', // URL路径name: 'home', // 路由名称（可选，用于命名路由）component: Home // 对应的组件},{path: '/news',name: 'news',component: News},{path: '/about',name: 'about',component: About},// 重定向：默认跳转到home页面{path: '/',redirect: '/home'}]
})export default router

步骤2：在main.ts中注册路由

// src/main.ts
import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index' // 导入路由实例const app = createApp(App)
app.use(router) // 注册路由
app.mount('#app')

步骤3：在根组件中使用路由出口

在App.vue中添加路由导航和路由出口（用于渲染匹配的组件）：

<!-- src/App.vue -->
<template><div class="app"><h1>Vue路由实战</h1><!-- 路由导航区：使用RouterLink组件 --><nav class="nav"><RouterLink to="/home" active-class="active">首页</RouterLink><RouterLink to="/news" active-class="active">新闻</RouterLink><RouterLink to="/about" active-class="active">关于</RouterLink></nav><!-- 路由出口：匹配的组件将在这里渲染 --><div class="content"><RouterView></RouterView></div></div>
</template><script setup lang="ts">
// 导入路由组件
import { RouterLink, RouterView } from 'vue-router'
</script><style scoped>
.nav {display: flex;gap: 20px;margin: 20px 0;
}
.active {color: #42b983;text-decoration: underline;
}
</style>

3. 路由模式说明

Vue Router提供两种路由模式，可通过createWebHistory和createWebHashHistory选择：

模式	实现方式	优点	缺点
history模式	HTML5 History API	URL无#，美观接近传统网站	需服务端配置，否则刷新404
hash模式	URL的hash值（#后内容）	兼容性好，无需服务端配置	URL带#，SEO优化较差

三、核心用法：路由导航与参数传递

1. 路由导航的两种方式

（1）声明式导航：RouterLink组件

RouterLink是Vue Router提供的导航组件，会自动渲染为<a>标签，且自带激活状态样式：

<!-- 字符串写法 -->
<RouterLink to="/home">首页</RouterLink><!-- 对象写法（推荐，支持传参） -->
<RouterLink :to="{ path: '/news', query: { id: 1 } }">新闻</RouterLink><!-- 命名路由写法（通过name跳转，更简洁） -->
<RouterLink :to="{ name: 'about' }">关于</RouterLink>

（2）编程式导航：useRouter钩子

在组件中通过代码控制路由跳转，需使用useRouter钩子获取路由实例：

<script setup lang="ts">
import { useRouter } from 'vue-router'const router = useRouter()// 跳转页面
const goToNews = () => {// 字符串跳转router.push('/news')// 对象跳转（带query参数）router.push({ path: '/news', query: { id: 1 } })// 命名路由跳转（带params参数）router.push({ name: 'news', params: { id: 1 } })// 替换当前历史记录（不会新增历史条目）router.replace('/about')
}
</script>

2. 路由参数传递

Vue Router支持两种参数传递方式：query参数和params参数

（1）query参数

• 特点：参数会拼接在URL后（如/news?id=1&title=xxx），刷新页面不丢失

• 传递方式：

<!-- 声明式 -->
<RouterLink :to="{ path: '/news/detail', query: { id: 1, title: 'Vue路由教程' } }">查看新闻
</RouterLink><!-- 编程式 -->
router.push({ path: '/news/detail', query: { id: 1, title: 'Vue路由教程' } })

• 接收方式：使用useRoute钩子获取路由信息

<script setup lang="ts">
import { useRoute } from 'vue-router'const route = useRoute()
console.log(route.query.id) // 1
console.log(route.query.title) // Vue路由教程
</script>

（2）params参数

• 特点：参数不会显示在URL中，需在路由规则中占位，刷新页面会丢失

• 配置路由规则（必须占位）：

routes: [{path: '/news/detail/:id/:title', // 占位符:参数名name: 'newsDetail',component: NewsDetail}
]

• 传递方式：

<!-- 声明式 -->
<RouterLink :to="{ name: 'newsDetail', params: { id: 1, title: 'Vue路由教程' } }">查看新闻
</RouterLink><!-- 编程式 -->
router.push({ name: 'newsDetail', params: { id: 1, title: 'Vue路由教程' } })

• 接收方式：

<script setup lang="ts">
import { useRoute } from 'vue-router'const route = useRoute()
console.log(route.params.id) // 1
console.log(route.params.title) // Vue路由教程
</script>

3. 路由props配置

为了让路由组件更优雅地接收参数，可以通过props配置将路由参数转为组件props：

// 路由规则配置
{path: '/news/detail/:id/:title',name: 'newsDetail',component: NewsDetail,// 方式1：布尔值（仅对params参数生效）props: true,// 方式2：函数写法（支持query/params参数）props: (route) => ({id: route.query.id,title: route.query.title})
}

组件中直接通过props接收：

<script setup lang="ts">
const props = defineProps<{id: stringtitle: string
}>()console.log(props.id)
console.log(props.title)
</script>

四、高级特性：嵌套路由与路由守卫

1. 嵌套路由

实现页面内的子页面切换（如新闻列表页包含新闻详情页），需使用children配置项：

步骤1：配置嵌套路由规则

routes: [{path: '/news',name: 'news',component: News,// 子路由配置children: [{path: 'detail/:id', // 子路由路径无需加/name: 'newsDetail',component: NewsDetail}]}
]

步骤2：在父组件中添加子路由出口

<!-- News.vue（父组件） -->
<template><div class="news"><div class="news-list"><RouterLink v-for="item in newsList" :key="item.id" :to="{ name: 'newsDetail', params: { id: item.id } }">{{ item.title }}</RouterLink></div><!-- 子路由出口：子组件将在这里渲染 --><div class="news-content"><RouterView></RouterView></div></div>
</template>

2. 路由守卫

路由守卫用于控制路由的访问权限、监听路由变化等，常用的有全局守卫、路由独享守卫和组件内守卫。

（1）全局守卫

在router/index.ts中配置，对所有路由生效：

// 全局前置守卫：路由跳转前触发
router.beforeEach((to, from, next) => {// to：即将进入的路由// from：即将离开的路由// next：放行函数（Vue3中可直接返回true/false或路由对象）// 示例：判断是否登录，未登录跳转到登录页const isLogin = localStorage.getItem('token')if (to.path !== '/login' && !isLogin) {return { name: 'login' } // 未登录，跳转到登录页}return true // 已登录，放行
})// 全局后置守卫：路由跳转后触发（常用于页面标题设置）
router.afterEach((to, from) => {document.title = to.meta.title || 'Vue路由实战'
})

（2）组件内守卫

在组件中使用，控制当前组件的路由访问：

<script setup lang="ts">
import { onBeforeRouteEnter, onBeforeRouteLeave } from 'vue-router'// 进入组件前触发
onBeforeRouteEnter((to, from, next) => {// 此时组件尚未创建，无法访问thisconsole.log('进入组件前')next()
})// 离开组件时触发
onBeforeRouteLeave((to, from, next) => {// 常用于提示用户保存数据const confirmLeave = window.confirm('是否确定离开？未保存的数据将丢失')if (confirmLeave) {next()} else {next(false) // 取消跳转}
})
</script>

五、实战技巧与注意事项

1. 路由组件与普通组件的区别

• 路由组件：通常放在pages/views文件夹，通过路由跳转渲染，会被路由自动挂载/卸载

• 普通组件：通常放在components文件夹，通过组件标签直接使用，需手动控制显示隐藏

2. 路由懒加载

为优化首屏加载速度，可使用路由懒加载（按需加载组件）：

// 普通导入（首屏加载时全部加载）
import Home from '@/pages/Home.vue'// 懒加载（访问时才加载）
const Home = () => import('@/pages/Home.vue')// 路由配置
routes: [{path: '/home',component: Home}
]

3. 常见问题解决

（1）history模式刷新404

解决方案：服务端配置 fallback 到 index.html

• Nginx配置：

location / {try_files $uri $uri/ /index.html;
}

• Vercel配置（vercel.json）：

{"rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
}

（2）路由参数变化不触发组件更新

当路由参数变化但组件未重新创建时（如/news/detail/1跳转到/news/detail/2），组件不会重新渲染。解决方案：

<script setup lang="ts">
import { useRoute, watch } from 'vue-router'const route = useRoute()// 监听路由参数变化
watch(() => route.params.id,(newId) => {// 执行参数变化后的逻辑（如重新请求数据）fetchData(newId)}
)
</script>

六、总结

Vue Router是Vue生态中不可或缺的核心插件，本文从基础配置、导航方式、参数传递到高级特性，全面覆盖了Vue3路由的关键知识点。掌握路由的核心在于理解"URL与组件的映射关系"，并灵活运用各种API满足不同场景需求。

在实际开发中，建议结合项目特点选择合适的路由模式，合理使用路由守卫控制权限，通过懒加载优化性能。随着学习的深入，会继续探索动态路由、路由元信息等更高级的用法，让路由管理更加灵活高效。