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后面會顯示參數(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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue項(xiàng)目部署上線遇到的問題及解決方法，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2018-06-06
這篇文章主要為大家詳細(xì)介紹了Vue.js render方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-04-04
本篇文章主要介紹了了解VUE的render函數(shù)的使用，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-06-06
詳解使用Vue.Js結(jié)合Jquery Ajax加載數(shù)據(jù)的兩種方式
本篇文章主要介紹了詳解使用Vue.Js結(jié)合Jquery Ajax加載數(shù)據(jù)的兩種方式，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
這篇文章主要介紹了Vue的編碼技巧與規(guī)范使用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
vue+echarts實(shí)現(xiàn)條紋柱狀橫向圖
這篇文章主要為大家詳細(xì)介紹了vue+echarts實(shí)現(xiàn)條紋柱狀橫向圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
vue-cli創(chuàng)建項(xiàng)目時(shí)由esLint校驗(yàn)導(dǎo)致報(bào)錯(cuò)或警告的問題及解決
這篇文章主要介紹了vue-cli創(chuàng)建項(xiàng)目時(shí)由esLint校驗(yàn)導(dǎo)致報(bào)錯(cuò)或警告的問題及解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章主要介紹了Element Alert警告的具體使用方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
Computed 計(jì)算屬性是 Vue 中常用的一個(gè)功能，本篇文章主要介紹了Vue Computed 計(jì)算屬性原理，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-05
VuePress 靜態(tài)網(wǎng)站生成方法步驟
這篇文章主要介紹了VuePress 靜態(tài)網(wǎng)站生成方法步驟，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-02-02