vue3的页面跳转有两种方式,第一种是标签内跳转,第二种是编程式路由导航
- 1、
- <router-link to='/testDemo'>
- <button>点击跳转1</button>
- </router-link>
- 2、router.push("/testDemo");
1、标签内 router-link跳转
通常用于点击 查看 按钮,跳转到其他页面
- // 1、不带参数直接跳转
- <router-link to='/testDemo'>
- <button>点击跳转1</button>
- </router-link>
- <router-link :to="{name:'testDemo'}">
- <router-link :to="{path:'/testDemo'}"> //name,path都行, 建议用name
- // 2、带参数跳转
- // (1)query参数
- <router-link :to="{path:'testDemo',query:{id:001}}">
- <button>点击跳转2</button>
- </router-link>
- // 类似类似get,url后面会显示参数
- // 路由可不配置
- // (2)params参数
- <router-link :to="{name:'testDemo',params:{setid:002}}">
- <button>点击跳转3</button>
- </router-link>
- // 类似post
- // 路由配置 path: "/home/:id" 或者 path: "/home:id"
2、编程式路由导航
- import { useRouter } from "vue-router";
- const router = useRouter();
- //直接跳转
- const handleChange = () => {
- router.push("/testDemo");
- };
- //带参数跳转
- router.push({path:'/testDemo',query:{id:003}});
- router.push({name:'testDemo',params:{id:004}});
到此这篇关于vue3页面跳转的文章就介绍到这了,更多相关vue3页面跳转内容请搜索w3xue以前的文章或继续浏览下面的相关文章希望大家以后多多支持w3xue!