vue3 setup 路由跳转

在 Vue 3 中，可以使用 `useRouter` 来访问路由器对象，然后使用 `push` 方法来进行路由跳转。

首先，在使用路由的组件中，需要引入 `useRouter`：

import { useRouter } from 'vue-router';

然后在组件中使用 `useRouter` 来获取路由器对象：

setup() {
  const router = useRouter();
  // ...
}

最后，在需要进行路由跳转的地方，使用 `router.push` 方法进行跳转：

router.push('/path/to/route');

例如，当点击一个按钮时跳转到 `/home` 路径：

<template>
  <button @click="goHome">Go Home</button>
</template>

<script>
import { useRouter } from 'vue-router';

export default {
  setup() {
    const router = useRouter();

    const goHome = () => {
      router.push('/home');
    };

    return {
      goHome
    };
  }
};
</script>

相关问题

vue3路由跳转setup

在Vue3中，可以使用`useRouter`函数来获取路由实例，并使用`push`方法进行路由跳转。在`setup`函数中使用路由跳转的示例如下：

import { useRouter } from 'vue-router'

export default {
  setup() {
    const router = useRouter()

    function goToPage() {
      router.push('/page')
    }

    return {
      goToPage
    }
  }
}

vue3 router路由跳转

在Vue3中，可以使用`useRouter`从Vue Router中引入路由实例，然后使用该实例进行路由跳转。以下是两种常见的路由跳转方法：

方法一：使用`useRouter`引入路由实例，然后使用`push`方法进行路由跳转。

<template>
  <div>
    <button @click="goToIndex">跳转到首页</button>
  </div>
</template>

<script>
import { useRouter } from 'vue-router'

export default {
  setup() {
    const router = useRouter()

    const goToIndex = () => {
      router.push('/index')
    }

    return {
      goToIndex
    }
  }
}
</script>

方法二：使用`$router`对象进行路由跳转。

<template>
  <div>
    <button @click="goToIndex">跳转到首页</button>
  </div>
</template>

<script>
export default {
  methods: {
    goToIndex() {
      this.$router.push('/index')
    }
  }
}
</script>