vue跳轉(zhuǎn)頁面的幾種常用方法代碼示例
vue跳轉(zhuǎn)不同頁面的方法
1.router-link跳轉(zhuǎn)
<!-- 直接跳轉(zhuǎn) -->
<router-link to='/testC'>
<button>點(diǎn)擊跳轉(zhuǎn)2</button>
</router-link>
<!-- 帶參數(shù)跳轉(zhuǎn) -->
<router-link :to="{path:'testC',query:{setid:123456}}">
<button>點(diǎn)擊跳轉(zhuǎn)1</button>
</router-link>
<router-link :to="{name:'testC',params:{setid:1111222}}">
<button>點(diǎn)擊跳轉(zhuǎn)3</button>
</router-link>2.this.$router.push()
<template>
<div id='app'>
<button @click='goTo()'>點(diǎn)擊跳轉(zhuǎn)4</button>
</div>
</template>
<script>
new Vue({
el:'#app',
methods:{
goTo(){
//直接跳轉(zhuǎn)
this.$router.push('/testDemo');
//帶參數(shù)跳轉(zhuǎn)
this.$router.push({path:'/testC',query:{setid:123456}});
this.$router.push({name:'testC',params:{setid:111222}});
}
}
})
</script>3.a標(biāo)簽可以跳轉(zhuǎn)外部鏈接,不能路由跳轉(zhuǎn)
<a ><button>點(diǎn)擊跳轉(zhuǎn)5</button></a>
接收:this.$route.query.serid 和 this.$route.params.setid
vue三種不同方式實(shí)現(xiàn)跳轉(zhuǎn)頁面
Vue:router-link
<router-link to="/">[跳轉(zhuǎn)到主頁]</router-link>
<router-link to="/login">[登錄]</router-link>
<router-link to="/logout">[登出]</router-link>
this.$router.push("/");this.$router.push("/")
<button @click="goHome">[跳轉(zhuǎn)到主頁]</button>
export default {
name: "App",
methods: {
// 跳轉(zhuǎn)頁面方法
goHome() {
this.$router.push("/");
},
}this.$router.go(1)
<button @click="upPage">[上一頁]</button>
<button @click="downPage">[下一頁]</button>
upPage() {
// 后退一步記錄,等同于 history.back()
this.$router.go(-1);
},
downPage() {
// 在瀏覽器記錄中前進(jìn)一步,等同于 history.forward()
this.$router.go(1);
}代碼示例:
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view/>
<router-link to="/">[跳轉(zhuǎn)到主頁]</router-link>
<router-link to="/login">[登錄]</router-link>
<router-link to="/logout">[登出]</router-link>
<!-- javascript跳轉(zhuǎn)頁面 -->
<button @click="goHome">[跳轉(zhuǎn)到主頁]</button>
<!-- 回到上一頁 -->
<button @click="upPage">[上一頁]</button>
<button @click="downPage">[下一頁]</button>
<!-- 回到下一頁 -->
</div>
</template>
<script>
export default {
name: "App",
methods: {
// 跳轉(zhuǎn)頁面方法
goHome() {
this.$router.push("/");
},
upPage() {
// 后退一步記錄,等同于 history.back()
this.$router.go(-1);
},
downPage() {
// 在瀏覽器記錄中前進(jìn)一步,等同于 history.forward()
this.$router.go(1);
}
}
};
</script>總結(jié)
到此這篇關(guān)于vue跳轉(zhuǎn)頁面的幾種常用方法的文章就介紹到這了,更多相關(guān)vue跳轉(zhuǎn)頁面方法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- vue 倒計(jì)時(shí)結(jié)束跳轉(zhuǎn)頁面實(shí)現(xiàn)代碼
- vue如何跳轉(zhuǎn)到其他頁面
- vue 跳轉(zhuǎn)到其他頁面并關(guān)閉當(dāng)前頁面的實(shí)現(xiàn)代碼
- vue實(shí)現(xiàn)頁面跳轉(zhuǎn)和參數(shù)傳遞的兩種方式
- Vue路由跳轉(zhuǎn)傳參或打開新頁面跳轉(zhuǎn)的方法總結(jié)
- vue路由跳轉(zhuǎn)到新頁面實(shí)現(xiàn)置頂
- vue實(shí)現(xiàn)三級頁面跳轉(zhuǎn)功能
- vue3頁面跳轉(zhuǎn)的兩種方式
- vue3 setup點(diǎn)擊跳轉(zhuǎn)頁面的實(shí)現(xiàn)示例
相關(guān)文章
vue項(xiàng)目打包為APP,靜態(tài)資源正常顯示,但API請求不到數(shù)據(jù)的操作
這篇文章主要介紹了vue項(xiàng)目打包為APP,靜態(tài)資源正常顯示,但API請求不到數(shù)據(jù)的操作,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
Vue引入使用localforage改進(jìn)本地離線存儲方式(突破5M限制)
這篇文章主要介紹了Vue引入使用localforage改進(jìn)本地離線存儲方式(突破5M限制),具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
vue-quill-editor實(shí)現(xiàn)圖片上傳功能
這篇文章主要為大家詳細(xì)介紹了vue-quill-editor實(shí)現(xiàn)圖片上傳功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-08-08
vuex+axios+element-ui實(shí)現(xiàn)頁面請求loading操作示例
這篇文章主要介紹了vuex+axios+element-ui實(shí)現(xiàn)頁面請求loading操作,結(jié)合實(shí)例形式分析了vuex+axios+element-ui實(shí)現(xiàn)頁面請求過程中l(wèi)oading遮罩層相關(guān)操作技巧與使用注意事項(xiàng),需要的朋友可以參考下2020-02-02
如何用命令窗口的方式創(chuàng)建Vue項(xiàng)目
這篇文章主要介紹了如何用命令窗口的方式創(chuàng)建Vue項(xiàng)目過程,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
vue修改vue項(xiàng)目運(yùn)行端口號的方法
本篇文章主要介紹了vue修改vue項(xiàng)目運(yùn)行端口號的方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08

