路由核心功能详解

🎯 引言

掌握 Vue2 路由的核心功能，你可以轻松搭建多页面应用，处理各种复杂页面跳转与展示需求。这篇文章将帮助你理解动态路由、嵌套路由、重定向和别名的使用，还会带你了解编程式导航和不同路由模式的优缺点，实际项目中非常实用。

🌀 动态路由匹配：带参数的路由（如 /user/:id）

在实际开发中，很多页面的内容都依赖于 URL 中的参数，比如用户详情页用用户的 id 作为参数。Vue2 路由提供了动态路由匹配功能，允许我们通过路径参数来匹配不同的数据。

动态路由定义示例

const routes = [
    {
        path: '/user/:id',
        component: UserDetail,
    },
];

这里的 :id 表示占位符，访问 /user/123 时，123 会作为参数传递给组件。

如何获取动态参数？

在组件中，可以通过 $route.params 访问动态参数：

<template>
    <div>
        <h2>用户 ID：{{ userId }}</h2>
    </div>
</template>

<script>
export default {
    computed: {
        userId() {
            return this.$route.params.id;
        },
    },
};
</script>

🏗️ 嵌套路由：多级子页面展示

嵌套路由让我们能在父组件中展示子组件，实现页面的多级结构，比如电商后台的商品管理页面里有多个子页面。

嵌套路由的写法

const routes = [
    {
        path: '/dashboard',
        component: Dashboard,
        children: [
            {
                path: 'stats',
                component: Stats,
            },
            {
                path: 'settings',
                component: Settings,
            },
        ],
    },
];

访问 /dashboard/stats 会在 Dashboard 组件中展示 Stats 组件。

父组件中使用 <router-view>

父组件需要放置 <router-view>，用来渲染子路由对应的组件。

<template>
    <div>
        <h1>后台管理</h1>
        <router-view></router-view>
    </div>
</template>

<script>
export default {
    name: 'Dashboard',
};
</script>

🔄 重定向：redirect 配置方式

有时我们想让用户访问某个路径时自动跳转到别的路径，这时可以用重定向。

重定向示例

const routes = [
    {
        path: '/home',
        redirect: '/dashboard',
    },
];

访问 /home 会自动跳转到 /dashboard。

🎭 别名（alias）：多个路径对应同一个组件

有的时候，我们希望多个路径都显示同一个组件，但 URL 仍然保持原样，这时可以用 alias。

alias 示例

const routes = [
    {
        path: '/profile',
        component: Profile,
        alias: '/my-profile',
    },
];

访问 /profile 和 /my-profile 都会渲染 Profile 组件，但地址栏不会跳转。

🕹️ 编程式导航：使用 router.push()、router.replace() 进行跳转

除了模板里使用 <router-link>，我们还可以通过代码控制路由跳转，更灵活地响应用户操作。

router.push()

用于导航到一个新路由，类似浏览器的前进行为，会在历史记录中增加一条。

this.$router.push('/dashboard');

或者传对象

this.$router.push({ path: '/user/123' });

router.replace()

用于导航到一个新路由，但不会在历史记录中添加新的记录，替换当前页面。

this.$router.replace('/login');

🗺️ HTML5 History 模式

Vue2 路由默认使用 Hash 模式，它基于 URL 中的 # 符号实现路由切换，而 History 模式利用了 HTML5 的 History API，URL 更加美观。

Hash 模式原理

URL 中包含 # 和后面的内容，浏览器不会发送给服务器，前端根据 # 后的路径渲染对应页面。

示例 URL：

http://example.com/#/user/123

History 模式原理

通过 history.pushState 等 API 修改 URL，前端拦截并渲染对应内容，URL 看起来像普通路径。

示例 URL：

http://example.com/user/123

使用场景对比

• Hash 模式兼容性更好，无需后端配置，适合静态托管和简单场景。
• History 模式 URL 更美观，适合需要 SEO 优化的项目，但需要服务器支持，所有路由映射到入口页。

🧾 小节总结

• 动态路由让路径携带参数，组件通过 $route.params 访问。
• 嵌套路由实现多层页面结构，父组件需放置 <router-view>。
• 重定向和别名都解决路径映射问题，但表现不同；重定向改变 URL，别名不改变。
• 编程式导航通过 router.push() 和 router.replace() 实现更灵活的跳转控制。
• Hash 模式和 History 模式各有优劣，选择时需考虑兼容性和服务器配置。

❓ 知识问答（Q&A）

Q：动态路由参数变化时，组件会自动重新渲染吗？

A：不会，组件实例保持不变，需要通过 watch 监听 $route 变化或在路由守卫中处理。

Q：嵌套路由中，如果子路径以 / 开头会怎样？

A：会被当作根路径，导致路由匹配失败，正确写法是不含 /。

Q：如何在 History 模式下避免刷新页面 404？

A：需要服务器配置把所有路由请求重定向到 index.html。

🧪 小练习

练习1：实现带参数的动态用户页

完成一个路径为 /profile/:username 的路由，组件展示 URL 中的用户名。

const routes = [
    // 在这里添加路由配置
];

<template>
    <div>
        <h2>用户名：{{ username }}</h2>
    </div>
</template>

<script>
export default {
    computed: {
        username() {
            // 访问路由参数
        },
    },
};
</script>

练习2：嵌套路由多级菜单展示

定义一个 /settings 路由，包含两个子路由 /settings/account 和 /settings/privacy，分别展示不同内容。

const routes = [
    // 配置父路由和子路由
];

<template>
    <div>
        <h1>设置页面</h1>
        <!-- 子路由组件渲染区域 -->
    </div>
</template>

<script>
export default {
    name: 'Settings',
};
</script>

🎉 恭喜你已经掌握 Vue2 动态路由匹配、嵌套路由、重定向、别名、编程式导航以及 History 和 Hash 模式的使用技能啦！继续实践，会让你的前端路由开发更得心应手。