Vue的页面跳转有两种方式:标签内跳转和编程式路由导航。
标签内跳转通常用于点击按钮或链接时跳转到其他页面。可以使用<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。
编程式路由导航是通过编写代码来实现页面跳转。需要先引入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页面跳转的两种方式:标签内跳转和编程式路由导航。根据具体的需求,选择适合的方式来实现页面跳转。