vue methods 路由跳转
时间: 2023-09-09 10:09:15 浏览: 111
在Vue中,可以使用methods来实现路由跳转。通过给元素节点添加点击事件和方法,在方法里面改变Vue当前的路由来实现单页面的响应。具体的实现步骤如下:
1. 首先,在Vue组件的methods选项中定义一个方法,例如home和about。
2. 在方法中,通过this.$router.push()方法来改变Vue当前的路由。你可以在push()方法中传入一个对象,该对象包含路由的参数,例如path、query和params。
3. 在模板中,给元素节点绑定点击事件,并调用对应的方法。
例如,下面的代码片段演示了如何使用methods来实现路由跳转:
```
<template>
<div>
<button @click="home">Home</button>
<button @click="about">About</button>
</div>
</template>
<script>
export default {
methods: {
home() {
this.$router.push({ path: '/home' });
},
about() {
this.$router.push({ path: '/about' });
}
}
}
</script>
```
在上面的代码中,当点击"Home"按钮时,调用了home方法,并通过this.$router.push({ path: '/home' })将路由切换到了"/home"路径。当点击"About"按钮时,调用了about方法,并通过this.$router.push({ path: '/about' })将路由切换到了"/about"路径。
注意,这里的this.$router指的是Vue Router的实例,可以通过Vue Router的官方文档了解更多关于路由跳转的方法和参数的详细信息。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [VUE路由跳转详解](https://blog.csdn.net/weixin_45432736/article/details/106902897)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *2* [VUE路由跳转](https://blog.csdn.net/weixin_51551506/article/details/127100792)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]