探索Vue Router：构建高效单页面应用的指南

引言

Vue Router，作为Vue.js的官方路由管理器，为构建SPA提供了强大的支持

Vue Router 基础

Vue Router 的基本概念和作用

Vue Router 是一个用于构建单页面应用的 Vue.js 插件。它允许我们通过定义路由规则来将不同的 URL 映射到不同的组件，从而实现页面内容的动态渲染和切换，而不需要重新加载整个页面。Vue Router 提供了一种声明式的、嵌套路由配置方式，使得构建复杂的应用变得简单。

如何安装和配置 Vue Router

（操作起来比较繁琐，建议新手反复观看官方文档）

安装

Vue Router 可以通过 npm 或 yarn 进行安装（终端输入）：

npm install vue-router
# 或者
yarn add vue-router

配置

安装完成后，你需要在 Vue 应用中引入并使用 Vue Router：

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

然后，创建一个 Router 实例，并定义路由规则：

const Foo = { template: '<div>foo</div>' };
const Bar = { template: '<div>bar</div>' };

const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
];

const router = new VueRouter({
  routes // （缩写）相当于 routes: routes
});

最后，创建和挂载根实例时，需要确保 router 配置到根实例中：

const app = new Vue({
  router
}).$mount('#app');

路由的基本使用

<router-link> 是一个组件，用于创建导航链接，类似于 HTML 中的 <a> 标签。<router-link> 的 to 属性用于指定目标路由的路径。

<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>

<router-view> 是一个组件，它用于渲染匹配当前路由的组件。当路由变化时，<router-view> 会根据路由规则动态地加载对应的组件。

<router-view></router-view>

在定义了路由和组件后，当用户点击 <router-link> 导航时，<router-view> 会渲染对应的组件。例如，当用户点击 “Go to Foo” 时，<router-view> 会渲染 Foo 组件。

动态路由匹配

使用动态路径参数来定义路由

动态路径参数以冒号 : 开头，它们类似于正则表达式的占位符，用于捕获 URL 的一部分。例如，如果我们有一个用户个人资料页面的路由，我们可以这样定义它：

const User = {
  template: '<div>User {{ $route.params.id }}</div>'
};

const router = new VueRouter({
  routes: [
    // 动态路径参数以冒号开始
    { path: '/user/:id', component: User }
  ]
});

在这个例子中，任何形式的 /user/x 都会映射到同一个路由，其中 x 可以是任何值。当匹配到路由时，x 的值会被存储在 $route.params.id 中。

获取路由参数和查询参数

路由参数

在组件内部，我们可以通过 $route.params 对象来访问路由参数。例如，在上述的 User 组件中，我们可以通过 this.$route.params.id 来获取用户 ID。

查询参数

查询参数是 URL 中的键值对，通常用于搜索、过滤等场景。它们位于 URL 的 ? 之后，多个参数之间用 & 分隔。例如，/user?id=123&name=alice。在 Vue Router 中，我们可以通过 $route.query 对象来访问这些参数。

例如，在组件中：

this.$route.query.id; // 获取 id 参数
this.$route.query.name; // 获取 name 参数

完整的例子

假设我们有一个商品详情页面的路由，我们希望通过路径参数传递商品 ID，并通过查询参数传递页码和排序方式：

const Product = {
  template: `<div>
    商品 ID: {{ $route.params.id }}
    <br>
    页码: {{ $route.query.page }}
    <br>
    排序方式: {{ $route.query.sort }}
  </div>`
};

const router = new VueRouter({
  routes: [
    { path: '/product/:id', component: Product }
  ]
});

 说了这么多，肯定会有小伙伴对路由参数和查询参数傻傻分不清，让我们详细讲讲

由参数和查询参数异同与各自优势

路由参数

路由参数是定义在路由路径中的动态部分，通常用于表示 URL 的一个固定部分，它们是 URL 结构的一部分，用于区分不同的路由。

优势：

• 明确性：路由参数通常用于唯一标识一个资源，如用户 ID、产品 ID 等，它们是 URL 的固有部分，明确表示了资源的定位。
• 结构化：路由参数有助于保持 URL 的结构化和清晰，使得 URL 更具可读性。
• 可缓存：由于路由参数是 URL 的一部分，因此对于具有相同参数的请求，浏览器和历史记录可以更有效地缓存和管理。

查询参数

查询参数是键值对，通常用于提供对资源的额外过滤、排序或分页信息。它们通常出现在 URL 的 ? 之后，多个参数之间用 & 分隔。

优势：

• 灵活性：查询参数可以包含任意数量的键值对，且可以随时添加或删除，而不影响 URL 的基本路径。
• 非侵入性：查询参数不会影响 URL 的基本结构，因此可以用于任何路由，而不需要为每个参数组合定义新的路由。
• 可变性强：查询参数非常适合用于搜索、筛选、分页等场景，因为这些操作通常需要根据用户输入或选择动态变化。

不同点

• 位置：路由参数位于 URL 路径中，而查询参数位于 URL 的查询字符串中。
• 用途：路由参数用于标识资源，查询参数用于提供资源的额外信息。
• 访问方式：在 Vue Router 中，路由参数通过 $route.params 访问，查询参数通过 $route.query 访问。
• 变化影响：改变路由参数通常会导致路由的变化，从而可能导致组件的重新渲染；而改变查询参数通常不会导致路由的变化，但可以通过监听 $route.query 来更新组件的状态。

讲人话，经常要变化的就用query，不经常变化的就用params

编程式导航

这一块其实相对来讲难度并不大，相信同学们都学过英语吧

编程式导航是 Vue Router 提供的一种通过编码方式实现路由跳转的方法。它允许你在 JavaScript 代码中直接调用路由实例的方法来改变当前路由。这种方法非常灵活，因为它可以在任何地方触发导航，包括按钮点击事件、异步操作完成之后，或者在某些条件逻辑中。

this.$router.push()

this.$router.push() 是最常用的编程式导航方法之一。它用于导航到不同的 URL，可以向历史记录中添加新的记录。这个方法接收一个目标位置作为参数，可以是字符串路径、对象形式的路径或者命名的路由。

示例：

// 字符串路径
this.$router.push('/home');

// 对象形式
this.$router.push({ path: '/home' });

// 命名路由，假设有一个名为 `home` 的路由
this.$router.push({ name: 'home' });

// 带查询参数，结果是 /register?plan=private
this.$router.push({ path: '/register', query: { plan: 'private' } });

this.$router.replace()

this.$router.replace() 用于导航到一个新的 URL，但是它不会向历史记录中添加新的记录，而是替换掉当前的记录。当你不想让用户通过浏览器的后退按钮回到上一个页面时，这个方法非常有用。

示例：

// 字符串路径
this.$router.replace('/home');

// 对象形式
this.$router.replace({ path: '/home' });

// 命名路由，假设有一个名为 `home` 的路由
this.$router.replace({ name: 'home' });

// 带查询参数，结果是 /register?plan=private
this.$router.replace({ path: '/register', query: { plan: 'private' } });

this.$router.go()

this.$router.go() 允许你在历史记录中前进或后退。这个方法的参数是一个整数，表示前进或后退的步数。

示例：

// 前进 3 步
this.$router.go(3);

// 后退 1 步
this.$router.go(-1);

// 前进或后退到特定的历史记录，比如前进到第 3 个记录
this.$router.go(3);

注意事项

在使用编程式导航时，应当注意避免重复导航到同一个路由，因为这可能会导致一些问题，比如无限循环。通常，你可以在导航前检查当前路由是否已经是目标路由，或者使用 replace 方法来避免添加新的历史记录。

Vue Router 进阶

动态添加和替换路由

在 Vue Router 中，你可以通过编程的方式动态地添加或替换路由。这通常在应用运行时根据某些条件动态加载新路由时使用。

动态添加路由

你可以使用 addRoute 或 addRoutes 方法来动态添加路由。

const router = new VueRouter({
  // ... 初始路由配置
});

// 添加新的路由
router.addRoute({
  path: '/new-page',
  component: NewPage
});

// 添加多个路由
router.addRoutes([
  { path: '/another-page', component: AnotherPage },
  { path: '/third-page', component: ThirdPage }
]);

动态替换路由

使用 replace 方法可以动态替换当前路由，而不会添加到历史记录中。

router.replace({ path: '/new-page' });

动态添加和替换路由的注意事项

• 动态添加的路由在应用启动时可能不会立即生效，除非你明确地调用 router.addRoutes()。
• 动态替换的路由会立即替换当前路由，但不会添加到历史记录中。
• 动态添加或替换路由时，确保你的应用逻辑正确，以避免不必要的路由冲突或导航错误。

 两种URL 模式

1. 历史模式（History Mode）

历史模式（history）的 URL 看起来像传统的服务器端渲染的网站，不包含 #。这种模式下，URL 类似于 http://example.com/user/123，而不是 http://example.com/#/user/123。

• 优点：

  • 更美观的 URL。
  • 更符合用户预期，看起来更像传统网站的 URL。
  • 更好的搜索引擎优化（SEO），因为搜索引擎通常不索引 # 后面的内容。

• 缺点：

  • 需要服务器配置支持。如果服务器不支持，你可能需要对 URL 进行重写。
  • 浏览器的前进和后退按钮可能不会按预期工作，因为 pushState 和 replaceState API 可能会影响它们的行为。

2. 哈希模式（Hash Mode）

哈希模式（hash）的 URL 包含 #，如 http://example.com/#/user/123。这种模式下，# 后面的内容不会被发送到服务器。

• 优点：

  • 不需要服务器配置支持。
  • 浏览器的前进和后退按钮通常会按预期工作，因为 # 后面的内容不会被发送到服务器。

• 缺点：

  • 更丑陋的 URL。
  • SEO 效果可能较差，因为搜索引擎通常不索引 # 后面的内容。

总结

Vue Router 是 Vue.js 的官方路由管理器，为构建单页面应用（SPA）提供支持。它通过定义路由规则，将 URL 映射到不同的组件，实现页面内容的动态渲染和切换，而无需重新加载页面

还是建议大家多看看官方文档：安装 | Vue Router