vue3跳转路由

作者：﹏尐甶园发布日期:2025-09-11 浏览:86

// 使用 Vue Router 在 Vue 3 中跳转路由的示例代码

// 首先确保你已经安装并配置了 Vue Router

// 1. 基本的命名路由跳转
this.$router.push({ name: 'user', params: { userId: 123 }});

// 解释：这行代码会导航到名为 'user' 的路由，并传递一个参数 `userId`，其值为 123。

// 2. 带查询参数的跳转
this.$router.push({ path: '/home', query: { plan: 'private' }});

// 解释：这行代码会导航到路径 `/home` 并附带查询参数 `plan=private`。最终 URL 可能是 `/home?plan=private`。

// 3. 使用编程方式返回上一页
this.$router.back();

// 解释：这行代码会模拟浏览器的后退按钮，返回上一页。

// 4. 使用 replace 方法跳转（不会向 history 添加新记录）
this.$router.replace({ path: '/login' });

// 解释：这行代码会导航到 `/login` 路径，但不会在 history 中添加新记录，意味着用户无法通过浏览器的后退按钮返回到之前的页面。

上一篇：vue获取当前时间并格式化

下一篇：vue钩子