vue 点击按钮跳转路由

点击按钮跳转路由有两种形式：声明式导航和编程式导航。在Vue中，声明式导航可以使用`router-link`组件来实现，通过设置`to`属性指定目标路由路径。编程式导航可以使用`this.$router.push()`方法或`this.$router.replace()`方法实现，通过传入目标路由路径作为参数进行跳转。

下面是一个例子：

<template>
  <div>
    <router-link to="/page1">跳转到页面1</router-link>
    <button @click="gotoPage2">跳转到页面2</button>
  </div>
</template>

<script>
export default {
  methods: {
    gotoPage2() {
      this.$router.push('/page2');
    }
  }
}
</script>

相关问题

vue点击按钮跳转路由

A：在Vue中实现页面路由跳转，需要使用Vue Router插件。在组件中，可以通过`this.$router.push()`方法实现路由跳转。

例如，在模板中添加一个按钮，绑定点击事件，点击按钮后跳转到目标路由：

<template>
  <div>
    <button @click="goToTarget">跳转</button>
  </div>
</template>

<script>
export default {
  methods: {
    goToTarget() {
      this.$router.push({ path: '/target' })
    }
  }
}
</script>

其中，`this.$router.push()`方法接受一个路由配置对象，可以通过`path`属性指定跳转路径。另外还可以传入`name`、`params`、`query`等参数，具体可以参考Vue Router文档。

vue3点击按钮跳转路由

在Vue 3中，你可以使用Vue Router来实现路由跳转。下面是一个简单的示例：

首先，确保你已经安装了Vue Router。可以使用以下命令进行安装：

npm install vue-router@next

接下来，在你的Vue应用程序的入口文件（例如main.js）中，导入Vue Router，并且使用`createRouter`函数创建一个路由实例：

import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import App from './App.vue'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    // 在这里定义你的路由配置
    // 示例：定义一个名为Home的路由
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    // 示例：定义一个名为About的路由
    {
      path: '/about',
      name: 'About',
      component: About
    }
  ]
})

const app = createApp(App)
app.use(router)
app.mount('#app')

在上面的代码中，我们定义了两个路由：'/'和'/about'，分别对应了Home和About组件。

然后，在你的组件模板中，你可以使用`<router-link>`来创建一个可以点击的链接，用于跳转到指定的路由：

<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <button @click="goToAbout">Go to About</button>
  </div>
</template>

<script>
export default {
  methods: {
    goToAbout() {
      this.$router.push('/about')
      // 或者使用命名路由
      // this.$router.push({ name: 'About' })
    }
  }
}
</script>

在上面的代码中，我们使用`<router-link>`来创建两个链接，分别跳转到'/'和'/about'。另外，我们还在按钮的点击事件中使用`$router.push()`来实现路由跳转，可以传递一个路径或者一个包含名称的对象。

这样，当你点击链接或者按钮时，就可以实现路由的跳转了。记得在你的组件中引入所需的路由组件（例如Home和About）并进行相应的配置。