Content

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

文章摘要

这篇文章主要介绍了如何使用HTML5 RouterLink进行直接跳转,包括不带参数和带参数的跳转方法。不带参数时,可以使用`<router-link to='跳转地址'>`或`<router-link :to="跳转地址">`实现跳转。带参数时,可以使用`query`参数或`params`参数来传递数据。文章还详细说明了这两种参数的使用方法及其适用场景,例如`query`参数适用于获取路由参数,而`params`参数类似于`POST`请求的方式传递数据。此外,文章还提到了如何配置不同类型的路由路径,如`path`和`name`两种方式。

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