vue2.0路由跳转

本文介绍了Vue Router中页面导航的方法,包括使用router.push进行页面跳转的不同方式,以及通过router.replace实现页面替换而非添加新记录。此外,还详细解释了如何利用router.go控制历史记录的前进与后退。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

router.push

// 字符串
router.push('home')
// 对象
router.push({ path: 'home' })
// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})
// 带查询参数,变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

如果是全局注册的路由Vue.use(VueRouter)

// 字符串
this.$router.push('home')
// 对象
this.$router.push({ path: 'home' })
// 命名的路由
this.$router.push({ name: 'user', params: { userId: 123 }})
// 带查询参数,变成 /register?plan=private
this.$router.push({ path: 'register', query: { plan: 'private' }})

push方法其实和是等同的。
注意:push方法的跳转会向 history 栈添加一个新的记录,当我们点击浏览器的返回按钮时可以看到之前的页面。

router.replace

push方法会向 history 栈添加一个新的记录,而replace方法是替换当前的页面,不会向 history 栈添加一个新的记录。用法如下

<router-link to="/05" replace>05</router-link>

this.$router.replace({ path: '/05' })

router.go

go方法用于控制history记录的前进和后退

// 在浏览器记录中前进一步,等同于 history.forward()
this.$router.go(1)
// 后退一步记录,等同于 history.back()
this.$router.go(-1)
// 前进 3 步记录router.go(3)
// 如果 history 记录不够用,那就默默地失败呗
this.$router.go(-100)
this.$router.go(100)

其实很好理解:go方法就是浏览器上的前进后退按钮,后面的参数就是前进和后退的次数

### Vue 2.0 中实现点击按钮进行路由跳转Vue 2.0 中,可以通过多种方式实现点击按钮触发路由跳转的功能。以下是两种常见的方法:`<router-link>` 和 `$router.push()`。 #### 方法一:使用 `<router-link>` `<router-link>` 是 Vue Router 提供的一个标签组件,用于声明式的导航。可以将其封装在一个按钮中,从而实现点击按钮跳转的效果[^1]。 ```html <!-- 使用 router-link 组件 --> <button @click="$event.preventDefault(); navigateToPage('/about')">关于</button> <script> export default { methods: { navigateToPage(path) { this.$router.push({ path }); // 动态设置目标路径 } } }; </script> ``` 如果希望直接通过模板语法完成,则可以如下: ```html <router-link to="/home" tag="button">首页</router-link> ``` 这里 `tag="button"` 将默认的 `<a>` 标签替换成了 `<button>`,使得外观更像一个按钮[^3]。 #### 方法二:使用 `$router.push()` 另一种更为灵活的方式是利用 JavaScript 编程式导航,即通过调用 `$router.push()` 来手动控制路由跳转[^4]。 ```javascript methods: { goToHome() { this.$router.push({ path: '/home', query: { userId: '123' }, // 可选参数,可通过 URL 查询字符串传递数据 }); }, } ``` 或者,在 HTML 模板中绑定事件处理程序: ```html <button @click="goToAbout">关于我们</button> <script> export default { methods: { goToAbout() { this.$router.push({ name: 'about', params: { id: '456' } }); // 如果有命名路由则推荐这种方式 } } }; </script> ``` 以上代码展示了如何通过编程式导航向指定的目标页面发送请求,并可以选择附加查询参数或路径参数[^2]。 --- ### 总结 无论是采用声明式还是编程式的方法,Vue Router 都能很好地满足开发者对于页面之间切换的需求。具体选择取决于实际应用场景和个人偏好。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

mf_717714

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值