vue3页面跳转

这篇具有很好参考价值的文章主要介绍了vue3页面跳转。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

vue3的页面跳转有两种方式,第一种是标签内跳转,第二种是编程式路由导航

1<router-link to='/testDemo'>
 <button>点击跳转1</button>
</router-link>

2、router.push("/testDemo");

1、标签内 router-link跳转

通常用于点击 查看 按钮,跳转到其他页面文章来源地址https://www.toymoban.com/news/detail-520302.html

// 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页面跳转的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包