vue-router

最新推荐文章于 2025-12-15 06:58:03 发布

原创

最新推荐文章于 2025-12-15 06:58:03 发布 · 638 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

Vue Router 是 Vue.js 官方的路由管理器，用于实现单页应用（SPA）的路由跳转、组件切换和状态管理。它与 Vue.js 核心深度集成，让构建单页应用变得简单直观。

一、基本使用（Vue 3 + Vue Router 4）

1. 安装

bash

# npm
npm install vue-router@4  # Vue 3 需使用 Vue Router 4+

# yarn
yarn add vue-router@4

2. 基本配置

创建路由配置文件（如 src/router/index.js）：

javascript

运行

// 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,
    // 路由元信息（可自定义数据，用于权限控制等）
    meta: {
   
   
      title: '关于我们',
      requiresAuth: false
    }
  }
];

// 创建路由实例
const router = createRouter({
   
   
  // 路由模式：history（HTML5 History 模式，无 #）
  history: createWebHistory(import.meta.env.BASE_URL),
  routes