深入理解 Vue Router 及其 `router` 和 `route` 变量

news2025/1/23 2:18:37

深入理解 Vue Router 及其 `router` 和 `route` 变量

在使用 Vue.js 进行单页面应用开发时，Vue Router 是一个不可或缺的工具。它使得我们可以轻松地管理应用中的路由，提供了流畅的用户体验。然而，在实际开发中，许多开发者可能会混淆 router 和 route 这两个变量。本文将介绍 Vue Router 的基础知识，并详细探讨 router 和 route 变量的区别及其具体用法。

Vue Router 基础

Vue Router 是 Vue.js 的官方路由管理器，它允许我们定义应用的路由规则，并基于这些规则显示不同的组件。通过 Vue Router，我们可以轻松实现单页面应用中的路由切换。

安装和配置 Vue Router

首先，我们需要安装 Vue Router。假设你已经有一个使用 Vue CLI 创建的 Vue 项目，可以使用以下命令安装 Vue Router：

npm install vue-router

安装完成后，在 src 目录下创建一个 router 文件夹，并在其中新建一个 index.js 文件：

// src/router/index.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';

Vue.use(VueRouter);

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
];

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
});

export default router;

在 src/main.js 中导入并使用这个路由器：

// src/main.js
import Vue from 'vue';
import App from './App.vue';
import router from './router';

Vue.config.productionTip = false;

new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

`router` 和 `route` 的区别

在 Vue Router 中，router 和 route 分别代表路由器实例和当前激活的路由对象。理解这两者的区别对于正确使用 Vue Router 至关重要。

`router` 对象

router 是 Vue Router 的实例，包含了所有的路由配置和导航逻辑。通过 router 对象，我们可以执行全局的导航操作，例如编程式导航、导航守卫等。

`router` 对象的使用场景

编程式导航：通过调用 router 实例的方法来改变当前的路由。

this.$router.push('/home');
this.$router.replace('/profile');
this.$router.go(-1); // 后退一步

导航守卫：在路由器实例上设置全局的导航守卫。

// src/router/index.js
router.beforeEach((to, from, next) => {
  // 做一些验证或权限检查
  if (to.meta.requiresAuth && !isAuthenticated()) {
    next('/login');
  } else {
    next();
  }
});

访问路由配置：可以通过 router.options.routes 访问所有的路由配置。
```
const routes = this.$router.options.routes;
```

`route` 对象

route 是当前激活的路由对象，包含了当前路由的所有信息，包括路径、参数、查询字符串、匹配到的路由记录等。route 对象是只读的，我们只能通过导航来改变它。

`route` 对象的使用场景

获取当前路由信息：包括路径、参数、查询字符串等。

const path = this.$route.path;
const params = this.$route.params;
const query = this.$route.query;

检测路由变化：可以在组件的 watch 选项中监测 $route 对象的变化。

watch: {
  $route(to, from) {
    // 当路由变化时执行一些操作
    console.log('Navigated from', from.path, 'to', to.path);
  }
}

匹配路由记录：通过 this.$route.matched 获取当前匹配到的所有路由记录。
```
const matchedRoutes = this.$route.matched;
```

代码示例

以下是一个简单的示例，展示了如何在同一个组件中使用 router 和 route：

<template>
  <div>
    <h1>当前路径：{{ $route.path }}</h1>
    <button @click="goToHome">回到首页</button>
  </div>
</template>

<script>
export default {
  methods: {
    goToHome() {
      this.$router.push('/home');
    }
  },
  watch: {
    $route(to, from) {
      console.log('路由变化：从', from.path, '到', to.path);
    }
  }
}
</script>

在这个示例中，我们通过 this.$route.path 获取当前路径，并在按钮点击时通过 this.$router.push('/home') 实现导航。同时，我们还在 watch 选项中监测路由变化并打印相关信息。

总结

本文介绍了 Vue Router 的基础知识，并详细探讨了 router 和 route 两个变量的区别及其使用场景。router 主要用于执行全局的导航操作和设置导航守卫，而 route 则用于获取当前路由的信息和监测路由变化。理解并正确使用这两者，能够帮助我们更高效地管理 Vue.js 应用中的路由逻辑。