28 Vue Router简介之路由的基本使用

在上篇中，我们讨论了如何进行 Vue Router 的安装与配置。在本章中，我们将深入探讨 Vue Router 的基本使用，包括路由的定义、导航和动态路由等内容。通过这些内容的学习，你将能够更好地构建具有多个视图的 Vue 应用。

路由的定义

首先，我们需要定义路由。在 Vue Router 中，路由是由一个对象组成的，这个对象通常包含路径和对应的组件。下面是一个简单的路由配置的示例：

import Vue from 'vue';
import Router from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';

Vue.use(Router);

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

const router = new Router({ routes });

在这个示例中，我们定义了两条路由：一条是访问根路径 / 时加载 Home 组件，另一条是访问 /about 时加载 About 组件。

导航

一旦定义了路由，我们就需要在我们的应用中提供导航。我们可以使用 <router-link> 组件来实现链接导航。以下是如何在模板中使用导航链接的示例：

<template>
  <div>
    <nav>
      <router-link to="/">首页</router-link>
      <router-link to="/about">关于</router-link>
    </nav>
    <router-view></router-view>
  </div>
</template>

在这个模板中，<router-link> 组件提供了两个链接，分别指向根路径和 about 路径。<router-view> 组件用于展示当前路由匹配的组件。

当你点击 “首页” 链接时，Vue Router 会将 URL 更改为 /，并且会显示 Home 组件。点击 “关于” 链接时，URL 会变为 /about，显示 About 组件。

动态路由

除了静态路由，Vue Router 还支持动态路由。动态路由允许你在路径中传递参数。例如，假设我们想要显示用户的个人资料，我们可以这样定义路由：

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

在这个路由中，:id 是一个动态参数。在用户访问 /user/123 时，我们可以在 UserProfile 组件中获取到 id 参数。

在组件中获取参数的方法如下：

export default {
  created() {
    const userId = this.$route.params.id;
    console.log(`用户ID: ${userId}`);
  }
};

通过 this.$route.params.id，我们能够获取到当前路由匹配的参数值。

路由守卫

在应用中，有时我们需要控制某些路由的访问权限。Vue Router 提供了路由守卫来实现这一功能。路由守卫可以是在路由进入前或路由离开时进行一些操作。以下是一个全局前置守卫的示例：

router.beforeEach((to, from, next) => {
  if (to.path !== '/' && !isAuthenticated()) {
    next('/'); // 如果未认证，则重定向到主页
  } else {
    next(); // 继续导航
  }
});

在这个例子中，如果用户未认证而尝试访问非主页的路由，将会重定向到主页。

小结

到此为止，我们已经学习了 Vue Router 的基本使用，包括路由定义、导航、动态路由和路由守卫。这些基础知识将帮助你创建更复杂的单页应用，使用户体验更佳。在下一篇中，我们将深入探讨 Vue Router 的嵌套路由的实现，进一步提升路由的灵活性和复杂性。

希望你能在实际项目中运用这些知识，构建出结构良好且用户友好的 Vue 应用！