vue3页面跳转的两种方式（vue跳转页面不刷新）原创

文章摘要

这篇文章介绍了如何使用HTML5 RouterLink标签实现网页跳转功能，重点讲解了不带参数和带参数的跳转方式。文中提到，在不带参数的情况下，可以通过直接跳转、使用路径名或名称名进行跳转；在带参数的情况下，可以使用路径参数、查询参数或Post请求参数来实现更灵活的跳转功能。文章还提到，通过合理配置Route的名称和路径，可以实现基于不同条件的跳转，适用于多种应用场景。

// 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”