Vue3的路由vue-router详解及应用

Vue3是一个功能强大且灵活的前端框架，提供了优秀的开发体验。而vue-router作为Vue的官方路由管理器，是构建单页面应用程序（SPA）的关键工具。本文将详细介绍vue-router在Vue3中的使用，并通过多个例子展示其在各种情况下的应用技巧，涵盖权限管理、懒加载、嵌套路由等。所有示例都将使用Vue3的setup语法糖进行书写。

一、安装vue-router

在Vue3项目中安装vue-router非常简单，只需运行以下命令：

npm install vue-router

二、基本使用

1. 创建路由配置文件

首先，我们需要创建一个路由配置文件src/router/index.js，并在其中定义我们的路由。

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

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

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
});

export default router;

2. 在主入口文件中使用路由

在src/main.js中导入并使用路由。

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

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

3. 创建组件

我们需要创建一些简单的组件来展示路由是如何工作的。例如Home.vue和About.vue。

<!-- Home.vue -->
<template>
  <div>
    <h1>Home Page</h1>
    <p>Welcome to the Home page!</p>
  </div>
</template>

<script setup>
</script>

<!-- About.vue -->
<template>
  <div>
    <h1>About Page</h1>
    <p>This is the About page.</p>
  </div>
</template>

<script setup>
</script>

三、动态路由匹配

动态路由匹配允许我们在URL中使用变量，这对于创建用户个人页面等功能非常有用。

1. 定义动态路由

在路由配置文件中，我们可以这样定义一个动态路由：

const routes = [
  // 其他路由
  {
    path: '/user/:id',
    name: 'User',
    component: () => import('../views/User.vue')
  }
];

2. 创建动态路由组件

创建User.vue，并使用setup语法糖获取路由参数：

<template>
  <div>
    <h1>User Page</h1>
    <p>User ID: {{ userId }}</p>
  </div>
</template>

<script setup>
import { useRoute } from 'vue-router';

const route = useRoute();
const userId = route.params.id;
</script>

四、嵌套路由

嵌套路由用于在一个视图中展示多个子视图。

1. 定义嵌套路由

在路由配置文件中，我们可以这样定义嵌套路由：

const routes = [
  {
    path: '/parent',
    component: () => import('../views/Parent.vue'),
    children: [
      {
        path: 'child',
        component: () => import('../views/Child.vue')
      }
    ]
  }
];

2. 创建父组件和子组件

创建Parent.vue和Child.vue。

<!-- Parent.vue -->
<template>
  <div>
    <h1>Parent Page</h1>
    <router-view></router-view>
  </div>
</template>

<script setup>
</script>

<!-- Child.vue -->
<template>
  <div>
    <h1>Child Page</h1>
    <p>This is a child route.</p>
  </div>
</template>

<script setup>
</script>

五、导航守卫

导航守卫用于在路由进入或离开时执行某些逻辑，例如权限验证。

1. 全局导航守卫

在路由配置文件中，我们可以添加全局导航守卫：

router.beforeEach((to, from, next) => {
  if (to.name !== 'Login' && !isAuthenticated) {
    next({ name: 'Login' });
  } else {
    next();
  }
});

2. 路由独享守卫

在路由定义中，我们可以添加路由独享守卫：

const routes = [
  {
    path: '/admin',
    component: () => import('../views/Admin.vue'),
    beforeEnter: (to, from, next) => {
      if (!isAdmin) {
        next({ name: 'Home' });
      } else {
        next();
      }
    }
  }
];

3. 组件内守卫

在组件中，我们可以添加组件内守卫：

<script setup>
import { onBeforeRouteLeave } from 'vue-router';

onBeforeRouteLeave((to, from, next) => {
  if (hasUnsavedChanges) {
    const answer = window.confirm('You have unsaved changes. Do you really want to leave?');
    if (answer) {
      next();
    } else {
      next(false);
    }
  } else {
    next();
  }
});
</script>

六、路由懒加载

为了优化性能，我们可以使用路由懒加载。Vue3的defineAsyncComponent使这一过程更加方便。

import { defineAsyncComponent } from 'vue';

const routes = [
  {
    path: '/lazy',
    component: defineAsyncComponent(() =>
      import('../views/LazyLoadedComponent.vue')
    )
  }
];

七、滚动行为

我们可以通过配置滚动行为来控制页面在导航时的滚动位置。

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition;
    } else {
      return { top: 0 };
    }
  }
});

八、路由元信息及权限管理

路由元信息（meta信息）允许我们为路由添加额外的字段，这在权限管理等场景中非常有用。

1. 定义带有元信息的路由

const routes = [
  {
    path: '/dashboard',
    component: () => import('../views/Dashboard.vue'),
    meta: { requiresAuth: true }
  },
  {
    path: '/login',
    component: () => import('../views/Login.vue')
  }
];

2. 使用导航守卫进行权限验证

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

3. 创建权限验证组件

<!-- Dashboard.vue -->
<template>
  <div>
    <h1>Dashboard</h1>
    <p>Welcome to the dashboard!</p>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router';

const router = useRouter();

// 假设有一个方法来验证用户是否已登录
if (!isAuthenticated) {
  router.push('/login');
}
</script>

九、导航守卫中的异步操作

在某些情况下，导航守卫可能需要进行异步操作，例如请求服务器以验证权限。这时，我们可以使用async和await来处理异步逻辑。

router.beforeEach(async (to, from, next) => {
  if (to.meta.requiresAuth) {
    const isAuthenticated = await checkAuth();
    if (isAuthenticated) {
      next();
    } else {
      next('/login');
    }
  } else {
    next();
  }
});

总结

通过本文，我们详细介绍了vue-router在Vue3中的使用方法，包括基本使用、动态路由、嵌套路由、导航守卫、路由懒加载、滚动行为、路由元信息及权限管理、导航守卫中的异步操作、利用路由实现面包屑导航以及路由过渡动画。希望这些示例和技巧能帮助你更好地掌握vue-router，在实际项目中得心应手地使用它。Happy coding!