[前端] vue3页面跳转的两种方式

668 0
王子 2023-5-17 07:57:55 | 显示全部楼层 |阅读模式
目录

    1、标签内 router-link跳转2、编程式路由导航

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页面跳转内容请搜索中国红客联盟以前的文章或继续浏览下面的相关文章希望大家以后多多支持中国红客联盟!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

中国红客联盟公众号

联系站长QQ:5520533

admin@chnhonker.com
Copyright © 2001-2024 Discuz Team. Powered by Discuz! X3.5 ( 粤ICP备13060014号 ) 本站已运行|天天打卡