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