vue3跳转页面

在 Vue 3 中，可以使用 `router-link` 标签或者 `$router.push` 方法来实现页面跳转。

1. 使用 `router-link` 标签

在模板中使用 `router-link` 标签，设置 `to` 属性为目标路由的路径即可。

<router-link to="/target-route">跳转到目标路由</router-link>

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

在 Vue 组件中，可以通过 `$router.push` 方法来进行页面跳转。该方法接收一个包含目标路由信息的对象作为参数。

this.$router.push({ path: '/target-route' })

也可以直接传入目标路由的路径作为参数。

this.$router.push('/target-route')

需要注意的是，使用 `$router.push` 方法进行页面跳转时，需要先在组件中导入 `router` 对象。

import { router } from 'vue-router'

export default {
  methods: {
    jumpToTargetRoute() {
      router.push('/target-route')
    }
  }
}

相关问题

vue3跳转页面传参

在 Vue 3 中，可以使用 `router-link` 组件来进行页面跳转，并且可以通过 `to` 属性传递参数。以下是一个示例：

<router-link :to="{ path: '/page', query: { id: 1 } }">跳转到页面</router-link>

在上面的示例中，我们通过 `path` 属性指定了跳转的路径为 `/page`，并且使用 `query` 属性传递了一个参数 `id`，其值为 `1`。

在接收参数的页面中，可以通过 `$route.query` 来获取传递的参数。以下是一个示例：

<template>
  <div>
    参数值为：{{ $route.query.id }}
  </div>
</template>

在上面的示例中，我们通过 `$route.query.id` 来获取传递的参数值。

希望能对你有所帮助！如果你有任何其他问题，请随时提问。

vue3 跳转页面传递参数

在Vue 3中，可以使用路由来进行页面之间的跳转，并且可以通过路由参数来传递数据。下面是一种常见的方式来实现跳转页面传递参数的方法：

1. 配置路由参数：
在定义路由时，可以在路由路径中使用冒号(:)来指定参数的位置。例如，定义一个带有参数的路由路径可以是`/user/:id`，其中`:id`表示参数的位置。

2. 跳转页面：
在需要跳转页面的地方，可以使用`<router-link>`标签或者`this.$router.push()`方法来进行跳转。同时，可以通过递一个对象来指定参数的值。例如：

<router-link :to="{ path: '/user', params: { id: 1 }}">跳转到用户页面</router-link>

或者

this.$router.push({ path: '/user', params: { id: 1 }});

3. 接收参数：
在目标页面中，可以通过`$route.params`来获取传递过来的参数。例如，在用户页面中可以通过`$route.params.id`来获取id参数的值。

这样就实现了在Vue 3中跳转页面传递参数的功能。