vue3的頁面跳轉(zhuǎn)有兩種方式,第一種是標(biāo)簽內(nèi)跳轉(zhuǎn),第二種是編程式路由導(dǎo)航文章來源:http://www.zghlxwxcb.cn/news/detail-520302.html
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)到其他頁面文章來源地址http://www.zghlxwxcb.cn/news/detail-520302.html
// 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)的文章就介紹完了。如果您還想了解更多內(nèi)容,請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!