vue3页面跳转

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();//直接跳转consthandleChange=()=>{
  router.push("/testDemo");};//带参数跳转
router.push({path:'/testDemo',query:{id:003}});
router.push({name:'testDemo',params:{id:004}});