vue3頁面跳轉(zhuǎn)的兩種方式
更新時間：2023年05月13日 11:26:09 作者：25:17
vue3的頁面跳轉(zhuǎn)有兩種方式，第一種是標簽內(nèi)跳轉(zhuǎn)，第二種是編程式路由導航，本文通過實例代碼給大家介紹的非常詳細，需要的朋友參考下吧
vue3的頁面跳轉(zhuǎn)有兩種方式，第一種是標簽內(nèi)跳轉(zhuǎn)，第二種是編程式路由導航
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、編程式路由導航
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}});到此這篇關于vue3頁面跳轉(zhuǎn)的文章就介紹到這了,更多相關vue3頁面跳轉(zhuǎn)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
vue數(shù)據(jù)初始化initState的實例詳解
Vue 實例在建立的時候會運行一系列的初始化操作，而在這些初始化操作里面，和數(shù)據(jù)綁定關聯(lián)最大的是 initState。這篇文章主要介紹了vue數(shù)據(jù)初始化--initState,需要的朋友可以參考下2019-04-04
一文搞懂Vue3中的異步組件defineAsyncComponentAPI的用法
這篇文章主要介紹了一文搞懂Vue3中的異步組件，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-07-07
這篇文章主要介紹了vue 實例方法和數(shù)據(jù)的相關資料，非常不錯，具有參考借鑒價值,需要的朋友可以參考下2017-10-10
本篇文章主要介紹了談談對vue響應式數(shù)據(jù)更新的誤解，深入了解了vue響應式數(shù)據(jù)，有興趣的可以了解一下2017-08-08
vue-cli2.0轉(zhuǎn)3.0之項目搭建的詳細步驟
這篇文章主要介紹了vue-cli2.0轉(zhuǎn)3.0之項目搭建的詳細步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
Vue3中的setup語法糖、computed函數(shù)、watch函數(shù)詳解
這篇文章主要介紹了Vue3中的setup語法糖、computed函數(shù)、watch函數(shù),本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-03-03
在項目開發(fā)中，我們經(jīng)常會遇到表單保存的功能，本文主要介紹了v-for中動態(tài)校驗el-form表單項的實踐，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧<BR>2022-05-05
這篇文章主要介紹了Vue.2.0.5過渡效果使用技巧，實例分析了Vue.2.0.5過渡效果的技巧，非常具有實用價值，需要的朋友可以參考下。2017-03-03
這篇文章主要介紹了vue中實現(xiàn)展示與隱藏側(cè)邊欄功能,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要介紹了詳解Vue自定義過濾器的實現(xiàn),小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧。2017-01-01