Vue的页面跳转有两种方式,第一种是标签内跳转,第二种是编程式路由导航
1. <router-link to='/Demo'> <button>点击跳转1</button> </router-link> 2.router.push("/Demo");
一、标签内通过 router-link跳转
通常用于点击 查看 按钮,跳转到其他页面
// 1. 不带参数直接跳转 <router-link to='/Demo'> <button>点击跳转</button> </router-link> <router-link :to="{name:'Demo'}"> <router-link :to="{path:'/Demo'}"> //name path都可以 建议用name // 2. 带参数跳转 // (1)query参数 <router-link :to="{path:'Demo',query:{id:1}}"> <button>点击跳转2</button> </router-link> // 3. params参数 <router-link :to="{name:'Demo',params:{setid:2}}"> <button>点击跳转</button> </router-link>
二、编程式路由导航
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}});