Vue Router 入门指南

vue-router 是 Vue.js 的官方路由库，它为单页面应用提供了简洁、高效的导航方案。本文旨在为初学者提供一个快速上手 vue-router 的指南。

1. 安装

开始之前，确保你已经安装了 vue-router。使用以下命令进行安装：

npm install vue-router@next
# 或
yarn add vue-router@next

提示: @next 适用于 Vue 3 的版本。如果你使用的是 Vue 2，请去除此标志。

2. 基本使用

初始化和安装 vue-router

首先，你需要在应用程序中引入并使用 vue-router：

import { createApp } from 'vue';
import { createRouter, createWebHistory } from 'vue-router';

const app = createApp(/* ... */);

const router = createRouter({
  history: createWebHistory(),
  routes: [], // 待定义的路由
});

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

定义路由

为应用的每个页面定义路由：

import HomeComponent from './components/Home.vue';
import AboutComponent from './components/About.vue';

const routes = [
  { path: '/', component: HomeComponent },
  { path: '/about', component: AboutComponent }
];

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

使用 <router-view> 和 <router-link>

在 Vue 模板中，用 <router-view> 组件显示当前路由的内容。使用 <router-link> 创建导航链接：

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

3. 进阶：动态路由和导航守卫

动态路由

动态路由使得我们可以根据 URL 参数动态渲染组件：

import UserDetailsComponent from './components/UserDetails.vue';

const routes = [
  // ... 其他路由
  { path: '/user/:id', component: UserDetailsComponent }
];

导航守卫

使用导航守卫可以为路由设置一些前置或后置条件，例如身份验证：

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

4. 总结

vue-router 为 Vue.js 提供了一套完善的路由方案，使开发单页面应用变得简单而高效。无论是基础的路由配置还是更高级的导航守卫，vue-router 都能胜任。希望这篇文章能帮助你开始你的 vue-router 之旅！