Vue3路由跳转例子

Vue3中，使用Vue Router来进行页面间跳转是很常见的。首先，你需要安装`vue-router`库。这是一个简单的路由跳转的例子：

<template>
  <button @click="goToAnotherPage">跳转到另一个页面</button>
</template>

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

export default {
  setup() {
    const router = useRouter(); // 获取router实例

    function goToAnotherPage() {
      router.push('/your-target-route'); // 跳转到'/your-target-route'页面
    }

    return { goToAnotherPage };
  },
}
</script>

在这个例子中，当用户点击按钮时，`goToAnotherPage`函数会被调用，它会使用`router.push`方法将用户导航到指定的目标路径`'/your-target-route'`。

相关问题

vue3路由跳转携带对象

在Vue 3中，可以使用`router.push`方法来进行路由跳转并携带对象参数。具体使用方法如下：

1. 首先在需要跳转的页面引入`useRouter`函数：

import { useRouter } from 'vue-router'

2. 在页面的`setup`函数中定义`router`变量：

const router = useRouter()

3. 使用`router.push`方法进行路由跳转，并在参数中传递一个对象，对象中可以包含路径和其他参数：

router.push({ path: '/home', query: { id: 1 } })

在这个例子中，我们传递了一个对象，其中包含了`path`属性用于指定跳转的路径，以及`query`属性用于传递参数。在`query`属性中，我们可以定义多个参数，比如这里我们传递了一个名为`id`的参数，其值为1。

总结起来，Vue 3中可以通过`router.push`方法进行路由跳转并携带对象参数，其中对象中的`path`属性用于指定跳转的路径，`query`属性用于传递参数。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [路由跳转和传参(vue3)](https://blog.csdn.net/m0_59680972/article/details/129319927)[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^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]

vue3路由跳转携带数据

在Vue 3中，可以使用`router.push`方法进行路由跳转，并且可以通过第二个参数来携带数据。下面是一个例子：

// 在当前页面
router.push({
  path: '/target',
  query: {
    data: 'your data here'
  }
})

// 在目标页面（target）
// 可以通过$route对象的query属性来获取携带的数据
console.log(this.$route.query.data) // 输出 'your data here'

在上面的例子中，我们使用了`router.push`方法进行路由跳转，并且传递了一个对象作为参数。对象中的`path`属性指定了目标页面的路径，而`query`属性则用于携带数据。在目标页面上，我们可以通过`this.$route.query`来获取携带的数据。

除了使用`query`来携带数据外，还可以使用`params`来携带数据，具体使用方式与上面类似，只是在路由定义和获取数据时稍有不同。如果需要保留路由历史记录，可以考虑使用`router.push`方法的第三个参数`{ replace: true }`。