快捷導(dǎo)航

vue跳轉(zhuǎn)頁面的幾種方法(推薦)

更新時(shí)間：2020年03月26日 17:28:48 作者：Janus_lian

這篇文章主要介紹了vue不同方法跳轉(zhuǎn)頁面，本文給大家分享多種方法，通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

vue跳轉(zhuǎn)不同頁面的多種方法

1：router-link跳轉(zhuǎn)

<!-- 直接跳轉(zhuǎn) -->
<router-link to='/testDemo'>
 <button>點(diǎn)擊跳轉(zhuǎn)2</button>
</router-link>
 
<!-- 帶參數(shù)跳轉(zhuǎn) -->
<router-link :to="{path:'testDemo',query:{setid:123456}}">
 <button>點(diǎn)擊跳轉(zhuǎn)1</button>
</router-link>
 
<router-link :to="{name:'testDemo',params:{setid:1111222}}">
 <button>點(diǎn)擊跳轉(zhuǎn)3</button>
</router-link>

2：this.$router.push()

<template>
 <div id='test'>
 <button @click='goTo()'>點(diǎn)擊跳轉(zhuǎn)4</button>
 </div>
</template>
<script>
 export default{
 name:'test',
 methods:{
 goTo(){
 //直接跳轉(zhuǎn)
 this.$router.push('/testDemo');
 
 //帶參數(shù)跳轉(zhuǎn)
 this.$router.push({path:'/testDemo',query:{setid:123456}});
 this.$router.push({name:'testDemo',params:{setid:111222}});
 }
 }
 }
</script>

params和query傳參數(shù)有什么不一樣？？在地址欄中可以看到，params傳參數(shù)時(shí)，地址欄中看不到參數(shù)的內(nèi)容，有點(diǎn)像ajax中的post傳參，query傳參數(shù)時(shí)，地址欄中可以看到傳過來的參數(shù)信息，有點(diǎn)像ajax的個(gè)體傳參

如果單獨(dú)傳setId一個(gè)參數(shù)的時(shí)候，地址欄中的地址如下圖：

第一種方式：path - query 傳參

第二種方式：name - params傳參數(shù)

但是一般情況下，傳參數(shù)是傳遞一個(gè)對(duì)象，當(dāng)傳遞的是一個(gè)對(duì)象的時(shí)候，地址欄中的地址如下圖：

第一種方式：path - query 傳參

第二種方式：name - params傳參數(shù)

3：a標(biāo)簽可以跳轉(zhuǎn)么？？可以跳轉(zhuǎn)外部鏈接，不能路由跳轉(zhuǎn)

<a href="https://www.baidu.com"><button>點(diǎn)擊跳轉(zhuǎn)5</button></a>

接收方怎么接收參數(shù)？？this.$route.query.serid和this.$route.params.setid，以下舉一個(gè)接收的例子

注意接收參數(shù)時(shí)是 $route 不是 $router

<template>
 <div>
 testDemo{{this.$route.query.setid}}
 </div>
</template>

知識(shí)點(diǎn)補(bǔ)充：vue三種不同方式實(shí)現(xiàn)頁面跳轉(zhuǎn)

Vue：router-lin

 <router-link to="/">[跳轉(zhuǎn)到主頁]</router-link>
 <router-link to="/login">[登錄]</router-link>
 <router-link to="/logout">[登出]</router-link>

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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: