vue点击跳转路由

在 Vue 中，可以使用 `router-link` 组件进行页面跳转，也可以通过编程式导航来实现。以下是两种方式的示例代码：

1. 使用 `router-link` 组件

<router-link to="/path">跳转到 path 路径</router-link>

2. 编程式导航

// 在组件内部
this.$router.push('/path');

// 在非组件的 js 文件中
import router from '@/router'
router.push('/path');

需要注意的是，如果是在非组件的 js 文件中使用编程式导航，需要先引入 Vue Router 并获取路由实例。

相关问题

vue3点击跳转路由

在Vue3中，可以使用`<router-link>`标签或者`$router.push()`方法来实现点击跳转路由的功能。

下面是两种实现方式的示例代码：

1. 使用`<router-link>`标签

<template>
  <router-link to="/about">About</router-link>
</template>

2. 使用`$router.push()`方法

<template>
  <button @click="goToAbout">Go to About</button>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
  methods: {
    goToAbout() {
      this.$router.push('/about')
    }
  }
})
</script>

需要注意的是，使用`<router-link>`标签需要先在组件中导入`router`对象，而使用`$router.push()`方法则需要在组件中混入`router`对象。

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>