目錄

• 1、標簽內(nèi) router-link跳轉(zhuǎn)
• 2、編程式路由導(dǎo)航

vue3的頁面跳轉(zhuǎn)有兩種方式，第一種是標簽內(nèi)跳轉(zhuǎn)，第二種是編程式路由導(dǎo)航

1、
<router-link to="/testDemo">
 <button>點擊跳轉(zhuǎn)1</button>
</router-link>
2、router.push("/testDemo");

1、標簽內(nèi) router-link跳轉(zhuǎn)

通常用于點擊 查看 按鈕，跳轉(zhuǎn)到其他頁面

// 1、不帶參數(shù)直接跳轉(zhuǎn)
<router-link to="/testDemo">
 <button>點擊跳轉(zhuǎn)1</button>
</router-link>
<router-link :to="{name:"testDemo"}"> 
<router-link :to="{path:"/testDemo"}"> //name,path都行, 建議用name 
// 2、帶參數(shù)跳轉(zhuǎn)
// （1）query參數(shù)
<router-link :to="{path:"testDemo",query:{id:001}}">
 <button>點擊跳轉(zhuǎn)2</button>
</router-link>
// 類似類似get,url后面會顯示參數(shù)
// 路由可不配置
// （2）params參數(shù)
<router-link :to="{name:"testDemo",params:{setid:002}}">
 <button>點擊跳轉(zhuǎn)3</button>
</router-link>
// 類似post
// 路由配置 path: "/home/:id" 或者 path: "/home:id"

2、編程式路由導(dǎo)航

import { useRouter } from "vue-router";
const router = useRouter();
//直接跳轉(zhuǎn)
const handleChange = () => {
  router.push("/testDemo");
};
 //帶參數(shù)跳轉(zhuǎn)
router.push({path:"/testDemo",query:{id:003}});
router.push({name:"testDemo",params:{id:004}});

到此這篇關(guān)于vue3頁面跳轉(zhuǎn)的文章就介紹到這了,更多相關(guān)vue3頁面跳轉(zhuǎn)內(nèi)容請搜索以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持！