vue 實現頁面跳轉


首先,vue項目文件夾如下:

在這里插入圖片描述
components下有兩個.vue文件,HelloWorld為創建時自動建立的,login需要自己創建的,login頁面效果如下:
在這里插入圖片描述

 

首先實現登錄按鈕的跳轉,先對index.js進行如下修改:

在這里插入圖片描述
在這里插入圖片描述

然后打開我的login.vue文件,找到中的登錄相關代碼,在中添加@click,並在其中寫入方法login
在這里插入圖片描述
然后在 < script>中的method里補全login相關方法:
在這里插入圖片描述
重點是this.$router.push(’/HelloWorld’),這是跳轉語句。完成之后點擊登錄即可跳轉:
在這里插入圖片描述

接着是實現< router-link>的跳轉:

只需要一條語句:
在這里插入圖片描述

這樣點擊注冊新賬號同樣也會跳轉到HelloWorld頁面。

在vue中使用標簽< a>實現跳轉較麻煩,標簽< router-link>可以很好的代替< a>的功能


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM