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

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í)，地址欄中可以看到傳過(guò)來(lái)的參數(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 ><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)頁(yè)面跳轉(zhuǎn)

Vue：router-lin

<router-link to='/'>[跳轉(zhuǎn)到主頁(yè)]</router-link> <router-link to='/login'>[登錄](méi)</router-link> <router-link to='/logout'>[登出]</router-link>

this.$router.push('/');

<button @click='goHome'>[跳轉(zhuǎn)到主頁(yè)]</button>export default { name: 'App', methods: { // 跳轉(zhuǎn)頁(yè)面方法 goHome() { this.$router.push('/'); },}

this.$router.go(1);

<button @click='upPage'>[上一頁(yè)]</button> <button @click='downPage'>[下一頁(yè)]</button> upPage() { // 后退一步記錄，等同于 history.back() this.$router.go(-1); }, downPage() { // 在瀏覽器記錄中前進(jìn)一步，等同于 history.forward() this.$router.go(1); }

代碼示例：

<template> <div id='app'> <img src='http://m.cgvv.com.cn/bcjs/assets/logo.png'> <router-view/> <router-link to='/'>[跳轉(zhuǎn)到主頁(yè)]</router-link> <router-link to='/login'>[登錄](méi)</router-link> <router-link to='/logout'>[登出]</router-link> <!-- javascript跳轉(zhuǎn)頁(yè)面 --> <button @click='goHome'>[跳轉(zhuǎn)到主頁(yè)]</button> <!-- 回到上一頁(yè) --> <button @click='upPage'>[上一頁(yè)]</button> <button @click='downPage'>[下一頁(yè)]</button> <!-- 回到下一頁(yè) --> </div></template> <script> export default { name: 'App', methods: { // 跳轉(zhuǎn)頁(yè)面方法 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)頁(yè)面的幾種方法的文章就介紹到這了,更多相關(guān)vue 跳轉(zhuǎn)頁(yè)面內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！