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