vue router 跳转

作者：寂寞算什么发布日期:2025-11-26 浏览:88

// Vue Router 跳转示例

// 1. 使用 this.$router.push 进行编程式导航
this.$router.push({ path: '/home' });
// 解释：这将导航到 /home 路由，等同于点击一个 <router-link to="/home"></router-link>

// 2. 带参数的跳转
this.$router.push({ name: 'user', params: { userId: 123 }});
// 解释：如果定义路由时使用了命名路由（name: 'user'），可以通过这种方式传递参数。这里假设有一个名为 user 的路由，它会接收一个 userId 参数。

// 3. 带查询参数的跳转
this.$router.push({ path: '/search', query: { q: 'vue router' }});
// 解释：这将导航到 /search?q=vue%20router，可以在目标页面通过 this.$route.query.q 获取查询参数。

// 4. 返回上一页
this.$router.back();
// 解释：这将返回浏览器历史记录中的上一页，类似于浏览器的后退按钮。

// 5. 替换当前路径（不添加新记录到历史）
this.$router.replace({ path: '/new-path' });
// 解释：replace 方法会替换当前的历史记录条目，而不是添加新的记录。

上一篇：vue3 动态style

下一篇：vue 调用子组件方法