Vue页面跳转的两种方式：标签内跳转和编程式路由导航

Vue的页面跳转有两种方式：标签内跳转和编程式路由导航。

1. 标签内跳转（router-link）

标签内跳转通常用于点击按钮或链接时跳转到其他页面。可以使用<router-link>标签来实现页面跳转，例如：

<router-link to=”/Demo”>
<button>点击跳转</button>
</router-link>

在这个例子中，点击按钮时会跳转到名为”Demo”的页面。你也可以使用to属性来指定跳转的路径，例如to=”/Demo”。

如果需要传递参数，可以使用query参数或params参数：

<router-link :to=”{ path: ‘/Demo’, query: { id: 1 } }”>
<button>点击跳转</button>
</router-link>

在这个例子中，点击按钮时会跳转到路径为”/Demo”，同时传递了一个名为”id”的参数，值为1。

2. 编程式路由导航（router.push）

编程式路由导航是通过编写代码来实现页面跳转。需要先引入useRouter方法来获取路由实例，然后使用router.push方法来进行跳转，例如：

import { useRouter } from “vue-router”;
const router = useRouter();

// 直接跳转
const handleChange = () => {
router.push(“/Demo”);
};

// 带参数跳转
router.push({ path: “/Demo”, query: { id: 3 } });
router.push({ name: “Demo”, params: { id: 1 } });

在这个例子中，router.push方法可以接收一个路径或一个包含路径和参数的对象，用来实现页面跳转。可以直接传递路径字符串，也可以传递一个包含path和query或name和params的对象。

以上就是Vue页面跳转的两种方式：标签内跳转和编程式路由导航。根据具体的需求，选择适合的方式来实现页面跳转。