探索Vue Router：构建高效单页面应用的指南_是否引入 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