16 Vue Router 的基本使用

在 Vue.js 开发中，Vue Router 是一个官方的路由管理器，它可以让我们在单页面应用（SPA）中轻松实现视图之间的切换。接下来，我们将详细介绍 Vue Router 的基本用法。

1. 安装 Vue Router

首先，你需要在项目中安装 Vue Router。如果你的项目是通过 Vue CLI 创建的，可以使用下面的命令进行安装：

npm install vue-router

2. 创建路由实例

在你的项目中，你通常会在 src/router/index.js 文件中定义路由配置。首先，我们需要引入 Vue 和 Vue Router，然后定义路由表：

import Vue from 'vue';
import Router from 'vue-router';
import Home from '../views/Home.vue'; // 引入组件
import About from '../views/About.vue'; // 引入组件

// 使用 Vue Router
Vue.use(Router);

// 定义路由
const routes = [
  {
    path: '/', // 访问根路径时显示的组件
    name: 'Home',
    component: Home
  },
  {
    path: '/about', // 访问 /about 路径时显示的组件
    name: 'About',
    component: About
  }
];

// 创建路由实例
const router = new Router({
  mode: 'history', // 使用 HTML5 History 模式
  routes // 使用刚才定义的 routes
});

export default router;

解释说明

• path: 定义了当前路由的 URL 路径。
• name: 给路由起个名字，方便后续引用。
• component: 表示当访问该路由路径时所渲染的组件。

3. 在 Vue 实例中使用路由

在 src/main.js 文件中需要将路由实例引入并挂载到 Vue 实例上：

import Vue from 'vue';
import App from './App.vue';
import router from './router'; // 引入 router

Vue.config.productionTip = false;

new Vue({
  router, // 将路由挂载到 Vue 实例上
  render: h => h(App)
}).$mount('#app');

4. 使用 <router-link> 进行页面导航

在你的组件中，你可以使用 router-link 组件来创建路由链接：

<template>
  <div id="app">
    <nav>
      <router-link to="/">首页</router-link>
      <router-link to="/about">关于</router-link>
    </nav>
    <router-view></router-view> <!-- 渲染匹配的组件 -->
  </div>
</template>

解释说明

• router-link: 用于跳转到不同的路由，它的 to 属性指向目标路径。
• router-view: 在这里显示匹配的路由组件。

5. 路由传参

有时你可能需要在路由中传递参数。可以通过动态路由实现这一点。例如，将路由配置更改为：

{
  path: '/user/:id', // :id 为动态参数
  name: 'User',
  component: User // 假设你已经创建了 User.vue 组件
}

如何获取参数

你可以在目标组件中通过 this.$route.params 来访问这些参数：

export default {
  mounted() {
    const userId = this.$route.params.id; // 获取动态参数 id
    console.log(`User ID: ${userId}`);
  }
}

6. 路由守卫

路由守卫允许你在进行路由跳转之前执行一些检查。可以在路由配置中添加守卫：

const routes = [
  {
    path: '/about',
    name: 'About',
    component: About,
    beforeEnter: (to, from, next) => {
      // 在进入路由之前的逻辑
      console.log('即将进入 About 页面');
      next(); // 允许路由进入
    }
  }
];

7. 总结

到此为止，我们已经涵盖了 Vue Router 的基础用法，包括安装、配置路由、通过 router-link 进行页面链接、传递参数以及设置路由守卫。通过熟练掌握这些基本概念，你将能够更有效地构建 Vue.js 单页面应用。

继续深入学习 Vue Router 的高级特性将让你的应用更加灵活和强大。