当前位置：首页 > news >正文

第45篇：Vue3 Router 零基础精讲——路由原理、声明式/编程式导航、参数传递

news 2026/7/27 15:04:37

前言

前面我们学完了 Vue3 所有核心语法：组合式API、响应式、生命周期、计算属性、侦听器、组件通信。

但这些只能写单页面组件。

真正的企业项目、官网、后台管理系统，全部都是多页面跳转、路由切换。

想要搭建完整 Vue 工程项目，必须掌握：Vue Router 路由。

路由是 Vue 工程化的核心骨架，负责页面跳转、权限控制、菜单匹配、页面渲染，是进阶必备技能。

一、路由是什么？（面试满分定义）

Vue Router 是 Vue 官方的单页面路由管理器。

传统网页跳转是「刷新页面、请求新页面」，单页应用路由是：不刷新浏览器，通过JS动态替换页面组件。

核心价值：

实现无刷新页面跳转（SPA单页应用）
URL地址对应页面组件
实现前进、后退、刷新页面不丢失状态
统一项目页面架构

二、Vue Router 安装与基础配置

1. 安装路由（Vue3 对应 router4.x）

npm install vue-router@4

2. 基础路由配置（企业标准结构）

新建 /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 } ] // 创建路由实例 const router = createRouter({ history: createWebHistory(), // history模式（无#） routes }) export default router

3. 全局挂载路由

main.js 引入挂载，全局生效

import { createApp } from 'vue' import App from './App.vue' import router from './router' createApp(App).use(router).mount('#app')

三、路由出口（必须配置）

<router-view>：页面组件渲染的位置，没有出口页面无法显示

<template> <div class="app">  <router-link to="/">首页</router-link> <router-link to="/about">关于我们</router-link>  <router-view></router-view> </div> </template>

四、两种跳转方式（项目100%高频）

1. 声明式导航：router-link（标签跳转）

适合菜单、固定导航，无需JS，自动高亮、阻止默认刷新。

<router-link to="/">首页</router-link>

2. 编程式导航：useRouter（JS跳转）

适合按钮点击、接口回调、条件判断后跳转，企业业务最常用。

<script setup> import { useRouter } from 'vue-router' const router = useRouter() const goAbout = () => { router.push('/about') } </script>

五、路由传参两种方案（必考+必用）

1. query传参（问号参数、刷新不丢失）

类似 get 请求参数，地址栏可见，刷新页面参数保留。

// 跳转传参 router.push({ path: '/detail', query: { id: 1001, title: '文章标题' } }) // 接收参数 import { useRoute } from 'vue-router' const route = useRoute() console.log(route.query.id)

2. params传参（动态路由、隐式参数）

参数隐藏、地址栏简洁，需要配置动态路由规则。

// 路由规则配置 { path: '/detail/:id', name: 'Detail', component: () => import('@/views/Detail.vue') } // 跳转 router.push({ name: 'Detail', params: { id: 1001 } }) // 接收 console.log(route.params.id)