Vue router详解和用法$router和$route的区别

Vue.js 是一款流行的前端框架，以其轻量级、易用性和强大的生态系统受到开发者的青睐。在 Vue 中，Vue Router 是官方提供的路由管理工具，用于实现单页面应用程序（SPA）的导航和页面切换。通过 Vue Router，开发者可以轻松地管理路由路径、传递参数以及控制页面渲染逻辑。然而，Vue Router 的核心对象 $router 和 $route 常常让初学者感到困惑。它们的功能看似相似，但在实际使用中有明确的分工和区别。本文将深入剖析 $router 和 $route 的区别，并结合实际案例讲解其用法，帮助读者全面掌握 Vue Router 的精髓。

一、 Vue Router 的基本概念

1. 什么是 Vue Router

Vue Router 是 Vue.js 的官方路由管理库，用于构建单页面应用（SPA）。它通过监听浏览器地址栏的变化，动态加载对应的组件并更新视图，从而实现页面的无刷新跳转。Vue Router 提供了一套完整的 API，包括路由定义、导航守卫、参数传递等功能，极大简化了 SPA 的开发流程。

1. 核心对象

Vue Router 提供了两个核心对象：

$router：代表整个路由实例，提供全局的路由操作方法。

$route：代表当前激活的路由信息，包含路径、参数、查询字符串等内容。

理解这两个对象的区别和联系是掌握 Vue Router 的关键。

二、$router 的功能与用法

1. 基本功能

$router 是 Vue Router 的全局对象，提供了与路由相关的全局方法和属性。它的主要作用是控制路由的导航和跳转。以下是一些常用的 $router 方法：

push(location)：导航到新的路由，不会保存历史记录。

replace(location)：导航到新的路由，替换当前的历史记录。

go(n)：前进或后退指定步数。

back()：后退一步。

forward()：前进一步。

currentRoute：返回当前激活的路由对象。

1. 示例代码

以下是一个简单的示例，展示如何使用 $router 进行路由跳转：

<template>
  <div>
    <button @click="navigateToHome">跳转到首页</button>
    <button @click="navigateToAbout">跳转到关于页</button>
  </div>
</template>
<script>
export default {
  methods: {
    navigateToHome() {
      this.$router.push({ name: 'home' });
    },
    navigateToAbout() {
      this.$router.push({ name: 'about' });
    }
  }
};
</script>

在这个例子中，点击按钮会触发 navigateToHome 或 navigateToAbout 方法，调用 $router.push 方法导航到对应的路由。

三、$route 的功能与用法

1. 基本功能

$route 是 Vue Router 提供的当前路由信息对象，包含了与当前激活路由相关的信息。它的主要作用是获取和操作当前路由的状态。以下是一些常用的 $route 属性：

path：当前路由的完整路径。

params：动态路由参数。

query：查询字符串参数。

name：路由名称。

matched：匹配的路由记录数组。

meta：路由元信息。

1. 示例代码

以下是一个示例，展示如何使用 $route 获取当前路由信息：

<template>
  <div>
    <h1>当前路由路径：{{ currentPath }}</h1>
    <h2>查询参数：{{ queryParams }}</h2>
    <h2>动态参数：{{ dynamicParams }}</h2>
  </div>
</template>
<script>
export default {
  computed: {
    currentPath() {
      return this.$route.path;
    },
    queryParams() {
      return this.$route.query;
    },
    dynamicParams() {
      return this.$route.params;
    }
  }
};
</script>

在这个例子中，我们通过计算属性获取当前路由的路径、查询参数和动态参数，并将其显示在页面上。

四、$router 和 $route 的区别

尽管 $router 和 $route 都是 Vue Router 的核心对象，但它们的功能和用途存在显著差异。以下是两者的对比：                      

1. 使用场景对比

$router 的使用场景

跳转到其他路由。

监听路由变化。

配置全局导航守卫。

$route 的使用场景

获取当前路由的路径。

解析动态参数和查询参数。

获取路由元信息。

1. 示例对比

以下是一个综合示例，展示 $router 和 $route 的区别：

<template>
  <div>
    <h1>当前路由路径：{{ currentPath }}</h1>
    <h2>查询参数：{{ queryParams }}</h2>
    <h2>动态参数：{{ dynamicParams }}</h2>
    <button @click="navigateToAbout">跳转到关于页</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      currentPath: '',
      queryParams: {},
      dynamicParams: {}
    };
  },
  computed: {
    currentPath() {
      return this.$route.path;
    },
    queryParams() {
      return this.$route.query;
    },
    dynamicParams() {
      return this.$route.params;
    }
  },
  methods: {
    navigateToAbout() {
      this.$router.push({ name: 'about', query: { lang: 'en' } });
    }
  }
};
</script>

在这个例子中，$route 用于获取当前路由信息，而 $router 用于实现路由跳转。

五、Vue Router 的高级用法

1. 动态路由参数

动态路由参数是 Vue Router 的一个重要特性，允许在路由路径中定义占位符。例如：

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

在组件中，可以通过 $route.params.id 获取动态参数值。

1. 路由守卫

Vue Router 提供了多种路由守卫，用于在导航过程中执行预处理逻辑。常见的路由守卫包括：

全局前置守卫：beforeEach

全局解析守卫：beforeResolve

全局后置钩子：afterEach

独享守卫：beforeEnter

1. 参数传递

通过 $router.push 方法可以传递参数，包括路径参数和查询参数。例如：

this.$router.push({
  name: 'profile',
  params: { id: 123 },
  query: { page: 1 }
});

在目标组件中，可以通过 $route.params 和 $route.query 获取传递的参数。

Vue Router 是 Vue.js 生态系统中不可或缺的一部分，它通过 $router 和 $route 两个核心对象实现了路由管理的核心功能。本文详细介绍了 $router 和 $route 的区别和用法，并结合实际案例展示了它们在项目中的应用场景。通过掌握这些知识，开发者可以更高效地构建单页面应用，并实现复杂的路由逻辑。希望本文的内容能够帮助读者更好地理解 Vue Router 的工作机制，并在实际开发中灵活运用。

声明：所有来源为“聚合数据”的内容信息，未经本网许可，不得转载！如对内容有异议或投诉，请与我们联系。邮箱：marketing@think-land.com