vue如何通過點擊事件實現(xiàn)頁面跳轉(zhuǎn)詳解
前言
頁面跳轉(zhuǎn),我們一般都通過路由跳轉(zhuǎn)實現(xiàn),通常情況下可直接使用router-link標簽實現(xiàn)頁面跳轉(zhuǎn),但是如果我們想通過點擊別的標簽實現(xiàn)頁面跳轉(zhuǎn),怎么辦呢?這個時候我們就要用到this.$router.push()方法,下面來給大家簡單介紹一下使用!
this.$router.push()
1.首先我們要定義一個點擊事件
2.在定義事件中調(diào)用this.$router.push()方法
<template> <button @click = "handle">點擊跳轉(zhuǎn)</button> </template> <script> export default{ methods:{ handle (){ // 路徑/home對應(yīng)我在router目錄下index.js中定義的path屬性值 this.$router.push('/home'); } } } </script>
目標跳轉(zhuǎn)頁面路由在router目錄下index.js定義如下:
export default new Router({ routes: [ { path: '/home', name:'Home', component: Home, }, ] })
this.$router.push()中的參數(shù)規(guī)則
參數(shù)為字符串,即路徑名稱
// 路徑/home對應(yīng)router目錄下index.js中定義的path屬性值 this.$router.push('/home');
參數(shù)為對象
// 對應(yīng)router目錄下index.js中定義的path this.$router.push({path:'/home'});
參數(shù)為路由命名
// 對應(yīng)router目錄下index.js中定義的name this.$router.push({name:'Home'});
帶傳遞參數(shù)
// params里面放置的是我們要傳遞過去的參數(shù) this.$router.push({name:'Home',params:{user:'david'}});
帶查詢參數(shù)
// 帶查詢參數(shù),傳遞過去的內(nèi)容會自動拼接變成/home?user=david this.$router.push({path:'/home',query:{user:'david'}});
參數(shù)的接收
當我們使用params進行傳參時,只需在接收參數(shù)的地方使用this.$route.params進行接收即可
eg:
//傳參 this.$router.push({name:'Home',params:{user:'david'}}); // 在name為Home的組件中接收參數(shù) const id=this.$route.params.id; console.log(this.$route.params);//打印結(jié)果為{user:'david'}
當我們使用query傳參時,只需在接收參數(shù)的地方使用this.$route.query進行接收即可,用法同上
?。?!這里有一個小細節(jié):$符號后面跟的是route不是router,跳轉(zhuǎn)的時候 $后面跟的是router?。?!
注意
- query傳參的參數(shù)會帶在url后邊展示在地址欄(/home?user=david),params傳參的參數(shù)不會展示到地址欄
- 由于動態(tài)路由也是傳遞params的,所以在 this.$router.push() 方法中path不能和params一起使用,否則params將無效,需要用name來指定頁面
- 我們也可以用this.$router.replace()來實現(xiàn)頁面跳轉(zhuǎn),二者的區(qū)別是push跳轉(zhuǎn)之后可以通過瀏覽器的回退鍵回到原來的頁面,而一旦使用replace跳轉(zhuǎn)之后,無法回到原來頁面
補充:VUE實現(xiàn)從一個頁面跳轉(zhuǎn)到另一個頁面的指定位置
例如,從網(wǎng)站的首頁點擊跳轉(zhuǎn)到指定頁面的底部。
首頁 home
<div @click="toPath('/targetPage#target')"> <p>點擊跳轉(zhuǎn)</p> </div>
methods:{ //點擊跳轉(zhuǎn)方法 toPath(path) { this.$router.push({path: path}) } }
跳轉(zhuǎn)到的頁面 targetPage
<div class="location" id="target"> <p>指定位置</p> </div>
//在mounted里 mounted() { var hash = window.location.hash; var index = hash.lastIndexOf("#"); if (index != -1) { var id = hash.substring(index + 1, hash.length + 1); var div = document.getElementById(id); if (div) { setTimeout(function () { console.log($(div).offset().top); $('html, body').animate({scrollTop: $(div).offset().top - 43}, 500) }, 500); } } }
親測有效 :D
總結(jié)
到此這篇關(guān)于vue如何通過點擊事件實現(xiàn)頁面跳轉(zhuǎn)的文章就介紹到這了,更多相關(guān)vue點擊事件實現(xiàn)頁面跳轉(zhuǎn)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
VUE前端實現(xiàn)token的無感刷新3種方案(refresh_token)
這篇文章主要給大家介紹了關(guān)于VUE前端實現(xiàn)token的無感刷新3種方案(refresh_token)的相關(guān)資料,為了提供更好的用戶體驗,我們可以通過實現(xiàn)Token的無感刷新機制來避免用戶在使用過程中的中斷,需要的朋友可以參考下2023-11-11從零搭建一個vite+vue3+ts規(guī)范基礎(chǔ)項目(搭建過程問題小結(jié))
這篇文章主要介紹了從零搭建一個vite+vue3+ts規(guī)范基礎(chǔ)項目,本項目已vite開始,所以按照vite官方的命令開始,對vite+vue3+ts項目搭建過程感興趣的朋友一起看看吧2022-05-05VUEX 數(shù)據(jù)持久化,刷新后重新獲取的例子
今天小編就為大家分享一篇VUEX 數(shù)據(jù)持久化,刷新后重新獲取的例子,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11Vue實現(xiàn)導(dǎo)出Excel表格文件提示“文件已損壞無法打開”的解決方法
xlsx用于讀取解析和寫入Excel文件的JavaScript庫,它提供了一系列的API處理Excel文件,使用該庫,可以將數(shù)據(jù)轉(zhuǎn)換Excel文件并下載到本地,適用于在前端直接生成Excel文件,這篇文章主要介紹了Vue實現(xiàn)導(dǎo)出Excel表格,提示文件已損壞,無法打開的解決方法,需要的朋友可以參考下2024-01-01vue修改數(shù)據(jù)視圖更新原理學(xué)習(xí)
這篇文章主要為大家介紹了vue修改數(shù)據(jù)視圖更新原理學(xué)習(xí),有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-11-11vue運行項目時network顯示unavailable的問題及解決
這篇文章主要介紹了vue運行項目時network顯示unavailable的問題及解決,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-09-09