Vue3 路由知识点详解
面向编程小白的 Vue Router 4 全面讲解，用通俗语言解析核心概念
📦 什么是路由？
路由就是根据不同的网址（URL）显示不同内容的功能。在传统的多页面网站中，每个页面都有独立的URL；而在单页面应用（SPA）中，所有内容都在一个页面中，通过路由来模拟多页面的效果。
为什么需要路由？
使用路由可以：
- 实现页面间的无刷新跳转（更好的用户体验）
- 使URL与页面内容保持同步（可以收藏或分享链接）
- 实现前进/后退功能
- 根据权限控制页面访问
⚙️ 安装与基本设置
使用Vue3的路由功能，需要安装Vue Router库（当前最新版本是Vue Router 4）：
// 安装命令（使用npm）
npm install vue-router@4
// 在main.js中配置
import { createApp } from ‘vue’
import { createRouter, createWebHistory } from ‘vue-router’
import App from ‘./App.vue’
// 1. 创建路由实例
const router = createRouter({
history: createWebHistory(), // 使用浏览器历史记录模式
routes: [] // 路由配置数组（稍后填充）
})
// 2. 创建Vue应用并使用路由
const app = createApp(App)
app.use(router)
app.mount(‘#app’)
在Vue组件中使用路由：
<template>
<div>
<router-link to=”/”>首页</router-link>
<router-link to=”/about”>关于我们</router-link>
<!– 路由匹配到的组件将渲染在这里 –>
<router-view></router-view>
</div>
</template>
🗺️ 路由配置详解
路由的核心是路由配置（routes数组），它定义了URL路径与组件的映射关系：
基础配置
动态路由
嵌套路由
const routes = [
{
path: ‘/’, // URL路径
name: ‘Home’, // 路由名称（可选）
component: Home // 对应的组件
},
{
path: ‘/about’,
name: ‘About’,
component: () => import(‘./views/About.vue’) // 路由懒加载
},
{
path: ‘/contact’,
component: Contact,
props: true // 可以将路由参数作为props传递
}
]
// 动态路由（参数以冒号开头）
{
path: ‘/user/:id’, // 匹配 /user/123 或 /user/abc
component: User,
props: true // 将id作为prop传递给组件
}
// 在User组件中访问参数
export default {
props: [‘id’], // 通过props接收
mounted() {
console.log(this.id) // 输出路由中的id参数
// 或通过路由对象访问
console.log(this.$route.params.id)
}
}
// 嵌套路由（子路由）
{
path: ‘/settings’,
component: Settings,
children: [
{
path: ‘profile’, // 匹配 /settings/profile
component: UserProfile
},
{
path: ‘privacy’, // 匹配 /settings/privacy
component: PrivacySettings
},
{
path: ”, // 默认子路由
component: SettingsHome
}
]
}
// 在Settings组件中需要放置<router-view>
<template>
<div>
<h1>设置</h1>
<!– 子路由出口 –>
<router-view></router-view>
</div>
</template>
🔗 路由导航方式
在Vue中有两种方式进行路由跳转：
用户点击
→
声明式导航
<router-link>
<router-link>
JS代码触发
→
编程式导航
router.push()
router.push()
1. 声明式导航（推荐）
使用<router-link>组件创建导航链接：
<!– 基本用法 –>
<router-link to=”/about”>关于我们</router-link>
<!– 使用命名路由 –>
<router-link :to=”{ name: ‘user’, params: { id: 123 }}”>
用户资料
</router-link>
<!– 带查询参数 –>
<router-link :to=”{ path: ‘/search’, query: { q: ‘vue’ }}”>
搜索Vue
</router-link>
<!– 替换当前历史记录 –>
<router-link to=”/home” replace>首页（无记录）</router-link>
2. 编程式导航
在JavaScript代码中进行路由跳转：
// 基本跳转
router.push(‘/about’)
// 使用命名路由
router.push({ name: ‘user’, params: { id: 123 } })
// 带查询参数
router.push({ path: ‘/search’, query: { q: ‘vue’ } })
// 替换当前历史记录（不会留下记录）
router.replace(‘/login’)
// 前进/后退
router.go(1) // 前进一步
router.go(-1) // 后退一步