Vue 路由详解：使用 Vue Router 构建单页应用导航

快速概述

Vue Router 是 Vue.js 官方的路由管理器，核心价值在于解决单页应用（SPA）中多视图切换与 URL 同步的问题，让应用在不刷新页面的情况下实现视图更新，并支持浏览器的前进后退操作。它适用于需要多页面导航、权限控制、动态渲染等场景的中大型 Vue 项目。前置环境要求：Vue 3 项目需安装 vue-router@4，Vue 2 项目对应 vue-router@3，且需具备基本的 Vue 组件化开发经验。

核心概念与原理

Vue Router 的核心机制是将 URL 路径与组件进行映射。当用户点击导航链接或调用编程式导航 API 时，路由器会解析目标路径，匹配预先定义的路由记录，并渲染对应的组件到 <router-view> 出口中。其工作流程可概括为：路由配置定义映射关系，导航触发路径变化，路由器匹配路由记录，最后渲染组件并更新视图。Vue Router 支持 hash 模式和 history 模式，前者通过 URL 的 # 符号实现，兼容性好；后者利用 HTML5 History API，URL 更美观，但需要服务器配置支持。

实战步骤与代码

1. 安装与基础配置

首先安装依赖：npm install vue-router@4。然后在项目中创建路由配置文件，并注册插件。

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
const routes = [ { path: '/', name: 'Home', component: Home }, { path: '/about', name: 'About', component: () => import('../views/About.vue') } // 路由懒加载 ]
const router = createRouter({ history: createWebHistory(), routes })
export default router

2. 在组件中获取路由信息

在 Vue 3 的 Composition API 中，推荐使用 useRoute 函数获取当前路由信息，包括 params、query、path 等常用属性。

// 组件内使用 




  

    

      评论列表
      0
    
  

  
  

  

    
    
    
        
    
    
    

  

    验证码(*)
    

      
      
    
  

        
    

      
      

    
    
    

      

        
          
          表情
        
        取消回复
      
      

        取消
        发表评论