溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天小編給大家分享的是兩種vue3頁面跳轉的方式，相信很多人都不太了解，為了讓大家更加了解，所以給大家總結了以下內容，一起往下看吧。一定會有所收獲的哦。
vue3的頁面跳轉有兩種方式，第一種是標簽內跳轉，第二種是編程式路由導航
1、
<router-link to='/testDemo'>
<button>點擊跳轉1</button>
</router-link>
2、router.push("/testDemo");通常用于點擊 查看 按鈕，跳轉到其他頁面
// 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"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頁面跳轉的方式就分享到這里了，希望以上內容可以對大家有一定的參考價值，可以學以致用。如果喜歡本篇文章，不妨把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
