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

2025-5-27Vue3快速上手

news 来源：原创 2025/5/31 15:28:12

1、对路由的理解

（1）路由（route）是一组key-value的对应关系。这种对应关系把 URL 路径和特定的组件、函数或者页面联系起来，其核心作用是依据不同的 URL 路径，将用户请求导向对应的处理逻辑。

（2）多个路由需要用路由器（router）来管理。

（3）路由是构建SPA应用（单页面应用）的核心技术。

2、路由器工作模式

Vue Router 的工作模式指的是路由系统处理 URL 和历史记录的方式，主要分为 hash 模式、history 模式 和 abstract 模式。

（1）Hash 模式（默认）

特点：

URL 中使用 # 符号（如 http://example.com/#/home），# 后的内容为路由路径。
浏览器不会将 hash 部分发送到服务器，所有跳转由前端处理。
改变 hash 不会触发页面刷新，只会触发 hashchange 事件。

const router = createRouter({history: createWebHashHistory(), // 使用 hash 模式routes: [...]
});

优缺点：

优点：兼容性极强（支持 IE9+），无需后端配置。
缺点：URL 不美观，带有 # 符号；部分场景下（如微信分享）可能有问题。

(2)History 模式（推荐）

特点：

使用 HTML5 的 pushState 和 replaceState API 实现路由切换。
URL 更美观（如 http://example.com/home），无 # 符号。
需要后端配合：当用户直接访问或刷新页面时，服务器需返回应用的入口文件（如 index.html），否则会出现 404 错误。

const router = createRouter({history: createWebHistory(), // 使用 history 模式routes: [...]
});

优缺点：

优点：URL 更符合直觉，适合需要 SEO 的场景（如内容型网站）。
缺点：需要后端配合，否则刷新页面会 404；兼容性稍差（IE10+）。

拓展：

开发环境与生产环境路径不一致

开发环境：通常运行在 http://localhost:5173/（根路径）。
生产环境：可能部署在 https://example.com/my-app/（子路径）。

使用 import.meta.env.BASE_URL 可以让路由配置自动适应不同环境，避免硬编码路径

import { createRouter, createWebHistory } from 'vue-router';
import Home from './views/Home.vue';
import About from './views/About.vue';const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: [{path: '/',name: 'Home',component: Home},{path: '/about',name: 'About',component: About}]
});export default router;

(3)Abstract 模式

特点：

不依赖浏览器历史 API，路由状态保存在内存中。
适用于非浏览器环境（如 Node.js、Weex、SSR 等）。
若在浏览器中使用，行为类似 hash 模式，但无 # 符号。

const router = createRouter({history: createMemoryHistory(), // 使用 abstract 模式routes: [...]
});

3、路由栈--push --replace

路由栈（history stack）是用来管理应用导航历史的机制。支持浏览器的前进、后退功能

常用方法：push,replace

特性	push	replace
是否新增记录	是（添加到栈顶）	否（替换栈顶的当前路由）
历史记录	保留，可后退到上一个路由	不保留，无法后退到被替换的路由
浏览器 URL	会生成新的历史记录（可在地址栏看到）	不会生成新记录（地址栏直接更新）
典型场景	普通页面跳转（如列表→详情页）	登录 / 登出、避免重复路由记录

push应用场景：普通页面跳转

// 从主页跳转到关于页，允许用户后退回到主页
router.push('/about');

replace应用场景：登录成功跳转

const handleLogin = async () => {await loginAPI();// 登录成功后，用主页替换登录页，避免用户点击后退回到登录页router.replace('/home'); 
};

4、RouterLink和RouterView组件

（1）RouterLink:

本质是一个<a>标签，用于导航

在 Vue Router 的 <RouterLink> 组件中，确实存在一个 replace 属性，用于控制导航行为。这与编程式导航中的 replace 方法功能类似，但使用方式不同。以下是详细解释：

当 <RouterLink> 设置 replace 属性时，点击链接会调用 router.replace() 而非 router.push()，即替换当前路由记录，不保留历史。

（2）RouterView:

内容区，用于给路由组件占位，当页面路由变成路由组件的路由时，路由组件挂载，当页面路由不再是该路由组件对应的路由，路由组件会卸载

5、路由的写法

嵌套路由

query参数

params参数

props配置

6、编程式路由导航

编程式路由导航是指通过代码逻辑而非声明式组件（如 Vue 的 <RouterLink>）来控制路由跳转的方式。它允许开发者在满足特定条件时（如登录验证成功、表单提交后）动态触发路由变化。

需要用到push和replace方法

特性	编程式导航	声明式导航（如 `<RouterLink>`）
触发方式	通过 JavaScript 代码调用	通过 HTML 标签点击触发
灵活性	高（支持条件判断、异步操作）	低（仅支持静态配置）
适用场景	登录验证、表单提交、权限控制	导航菜单、固定链接
代码位置	组件方法、生命周期钩子	模板（HTML 部分）