帮助

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

2024-01-08 10:51 技术文档

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页面跳转的两种方式:标签内跳转和编程式路由导航。根据具体的需求,选择适合的方式来实现页面跳转。



相关推荐

QQ在线咨询