一文详解Vue Router的使用和路由守卫

路由 strong class 组件 633 来源： 2024-10-30

Vue Router 是 Vue.js 的官方路由库，用于在 Vue 应用中实现单页面应用（SPA）的客户端路由。它使得 Vue 应用能够在不重新加载页面的情况下实现不同的视图和状态切换。以下是 Vue Router 的详细介绍，包括基本概念、配置、路由导航以及高级用法。

1 基本概念

路由 (Route): 路由是 URL 与 Vue 组件之间的映射关系。每个路由配置关联一个视图组件。

路由表 (Router Table): 路由表是一个数组，定义了路由的配置。每个路由配置项包括路径、组件及其他参数。

路由实例 (Router Instance): 一个 Vue Router 实例，负责管理路由配置、导航和路由状态。

路由视图 (Router View): 一个 Vue 组件，作为路由组件的容器，渲染与当前路由匹配的组件。

- 安装

首先，安装 Vue Router：

npm install vue-router

配置和使用

创建路由实例

创建一个 router/index.js 文件，定义路由配置并创建路由实例：

import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';

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

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

在 Vue 应用中使用路由

在 main.js 文件中导入路由实例，并将其传递给 Vue 应用：

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

const app = createApp(App);
app.use(router);
app.mount('#app');

使用路由视图

在应用的主组件 App.vue 中，使用组件来显示当前路由匹配的组件：

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

2 路由导航

编程式导航

使用 Vue Router 提供的 router 实例进行编程式导航：

// 在组件中
this.$router.push('/about');
// 或
this.$router.replace('/home');

还可以使用 router 实例的 push 和 replace 方法：

import { useRouter } from 'vue-router';

export default {
  setup() {
    const router = useRouter();

    function navigateToAbout() {
      router.push('/about');
    }

    return { navigateToAbout };
  }
}

声明式导航

使用组件实现声明式导航：

<template>
  <nav>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
  </nav>
</template>

3 路由守卫

路由守卫是 Vue Router 提供的一种功能，允许开发者在路由的进入、离开和变化过程中进行控制和处理。通过使用路由守卫，可以在用户导航到不同的路由时执行特定的操作，例如验证用户权限、处理数据加载等。Vue Router 提供了全局守卫、路由独享守卫和组件内守卫三种类型的守卫。

1. 全局守卫

全局守卫是在路由实例上定义的，适用于所有的路由。它们在路由变化时被调用。

beforeEach: 在路由导航开始之前调用，可以用于处理路由访问权限等操作。

router.beforeEach((to, from, next) => {
  console.log('Global beforeEach');
  // 判断是否需要登录
  if (to.meta.requiresAuth && !isAuthenticated()) {
    next('/login'); // 没有权限，重定向到登录页
  } else {
    next(); // 允许导航
  }
});

afterEach: 在路由导航结束之后调用，可以用于执行一些不影响导航的操作，例如记录日志。

router.afterEach((to, from) => {
  console.log('Global afterEach');
  // 可用于执行一些操作，例如更新页面标题
  document.title = to.meta.title || 'Default Title';
});

beforeResolve: 在路由解析完且所有组件内守卫和异步路由组件都已解析之后调用。适合进行需要在导航完成前进行的操作。

router.beforeResolve((to, from, next) => {
  console.log('Global beforeResolve');
  next();
});

2. 路由独享守卫

路由独享守卫是配置在特定路由中的，只有在匹配到该路由时才会触发。

beforeEnter: 在路由进入之前调用，与全局 beforeEach 类似，但仅针对特定路由。

const routes = [
  {
    path: '/profile',
    component: Profile,
    beforeEnter: (to, from, next) => {
      console.log('Route beforeEnter');
      if (to.meta.requiresAuth && !isAuthenticated()) {
        next('/login');
      } else {
        next();
      }
    }
  }
];

3. 组件内守卫

组件内守卫是定义在 Vue 组件内部的，专用于该组件的路由守卫。

beforeRouteEnter: 在路由进入之前调用，此时组件实例尚未被创建。通过 next 函数获取组件实例。

export default {
  name: 'Profile',
  beforeRouteEnter(to, from, next) {
    console.log('Component beforeRouteEnter');
    // 可以获取到组件实例
    next(vm => {
      console.log('Component instance:', vm);
    });
  }
}

beforeRouteUpdate: 当路由在同一个组件中变化时调用（例如在动态路由中），用于处理更新。

export default {
  name: 'Profile',
  beforeRouteUpdate(to, from, next) {
    console.log('Component beforeRouteUpdate');
    // 处理路由更新逻辑
    next();
  }
}

beforeRouteLeave: 当离开当前路由时调用，用于处理离开前的操作，例如确认对话框。

export default {
  name: 'Profile',
  beforeRouteLeave(to, from, next) {
    console.log('Component beforeRouteLeave');
    // 确认离开操作
    if (confirm('Do you really want to leave?')) {
      next();
    } else {
      next(false); // 取消导航
    }
  }
}

4 动态路由和嵌套路由

动态路由匹配

使用 : 来定义动态参数：

const routes = [
  { path: '/user/:id', component: User }
];
在组件中通过 this.$route.params 访问动态参数：

javascript
export default {
  computed: {
    userId() {
      return this.$route.params.id;
    }
  }
}

嵌套路由

在路由配置中定义嵌套路径：

const routes = [
  {
    path: '/profile',
    component: Profile,
    children: [
      { path: 'settings', component: ProfileSettings }
    ]
  }
];

在 Profile 组件中使用显示子路由组件：

<template>
  <div>
    <h2>Profile</h2>
    <router-view></router-view>
  </div>
</template>

5 路由重定向和别名

重定向

路由重定向用于将访问某一路径的请求自动转发到另一路径。这对于简化 URL 或引导用户到正确的页面非常有用。

示例

假设你希望将根路径 (/) 重定向到 /home：

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

当用户访问根路径时，他们会被自动重定向到 /home。

别名

路由别名允许你为一个路由配置多个路径。使用别名可以提供不同的 URL 路径来访问相同的页面。

示例假设你有一个 UserProfile 组件，且希望通过两个不同的路径访问它：

const routes = [
  {
    path: '/user/:id',
    component: UserProfile,
    alias: '/profile/:id' // 使用别名
  }
];

在这个示例中，访问 /user/123 和 /profile/123 都会渲染 UserProfile 组件。

6 路由元信息

路由元信息是用来存储与路由相关的自定义数据或信息的一个功能。这些信息不会直接影响路由的匹配，但可以用来在组件中进行条件渲染、权限控制等操作。

如何使用路由元信息

1. 定义元信息

在定义路由时，可以通过 meta 属性来添加元信息。例如：

const routes = [
  {
    path: '/admin',
    component: Admin,
    meta: { requiresAuth: true, title: 'Admin Page' }
  },
  {
    path: '/public',
    component: Public,
    meta: { title: 'Public Page' }
  }
];

2. 访问元信息

在组件中，可以通过 this.$route.meta 访问这些元信息。例如：

export default {
  name: 'MyComponent',
  computed: {
    pageTitle() {
      return this.$route.meta.title || 'Default Title';
    }
  }
};

3. 使用元信息进行路由守卫

可以在全局守卫、路由守卫中使用元信息来控制访问权限或进行其他操作。例如：

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isLoggedIn()) {
    next('/login');
  } else {
    next();
  }
});

7 路由懒加载

路由懒加载是一种优化策略，用于减少初始加载时间和提高应用性能。通过将路由组件按需加载，而不是一次性加载所有组件，可以加快应用的响应速度和启动时间。

使用动态导入

使用 import() 函数来实现动态导入组件。在 Vue Router 中，可以将路由组件设置为懒加载的形式：

{
   name: 'information',
   path: '/information',
   component: () => import('@/view/app/information/Main')
},

路由懒加载的好处

减少初始加载时间：只有在用户访问特定路由时，相关的组件才会被加载。
提高应用性能：减轻主线程负担，提升用户体验。
按需加载：根据用户的导航行为加载所需的组件，优化资源使用。

结论

Vue Router 提供了丰富的功能来管理 Vue 应用中的路由。通过灵活配置路由、使用导航守卫、动态路由以及嵌套路由等功能，可以创建功能强大且用户体验良好的单页面应用。

上一篇：vue如何优雅的使用全局WebSocket

下一篇：vue修改props数据报错的问题及解决