vue?路由判斷方式
vue 路由判斷
解決的一個(gè)問(wèn)題分享。我的需求是從特定的頁(yè)面進(jìn)入當(dāng)前頁(yè)面會(huì)執(zhí)行一個(gè)定時(shí)器來(lái)增加閱讀人數(shù),當(dāng)進(jìn)入該頁(yè)面15秒后瀏覽人數(shù)會(huì)增加1。
話不多說(shuō)直接上代碼。先在methods里定義一個(gè)定時(shí)器方法和一個(gè)修改瀏覽人數(shù)方法。
methods: { // 增加閱讀人數(shù) setpeople(){ console.log('定時(shí)器開啟'); // overTimer 這個(gè)值可以寫在data里面 //也可以直接用 const overTimer = setTimeout(() =>{},15000) this.overTimer = setTimeout(() => { this.artical_peo = this.artical_peo + 1 this.setpeo() }, 15000) }, // 修改閱讀人數(shù) setpeo(){ let params = `artical_peo=${this.artical_peo}&&id=${this.id}` this.axios.put('/read',params).then(res=>{ // console.log(res); }) },
寫完之后要用到一個(gè)鉤子函數(shù)beforeRouteEnter來(lái)進(jìn)行路由的相關(guān)操作
// 超時(shí)定時(shí)器 overTimer: 15000, sname:'' } }, // 監(jiān)測(cè)路由跳轉(zhuǎn) beforeRouteEnter (to, from, next) { console.log('要跳到的頁(yè)面',to.name) console.log('從那個(gè)頁(yè)面跳過(guò)來(lái)',from.name) // console.log(next) next(vm =>{ //這里把獲取到的from.name給到data里面定義的sname vm.sname = from.name // console.log(vm.sname); }); },
這個(gè)函數(shù)可以檢測(cè)到你從那個(gè)頁(yè)面跳轉(zhuǎn)到某個(gè)頁(yè)面。
vm.sname = from.name 這個(gè)是把某個(gè)跳轉(zhuǎn)過(guò)來(lái)頁(yè)面的路由給賦值到sname里面,然后在做下一步判斷。
這里直接在mounted里面寫一個(gè)判斷 就是如果從scang頁(yè)面跳轉(zhuǎn)過(guò)來(lái)就不執(zhí)行這個(gè)定時(shí)器,瀏覽人數(shù)也就不會(huì)增加。反之從別的頁(yè)面來(lái)瀏覽我的文章就執(zhí)行定時(shí)器來(lái)增加瀏覽人數(shù)。
mounted () { // 判斷當(dāng)前跳轉(zhuǎn)過(guò)來(lái)的頁(yè)面如果是 scang 就不啟動(dòng)定時(shí)器 if(this.sname == 'Scang'){ //清除定時(shí)器 clearTimeout(this.setpeople) }else{ // 開啟定時(shí)器 當(dāng)點(diǎn)進(jìn)來(lái)瀏覽夠15秒后閱讀量加一 this.setpeople() } },
這里就是從scang頁(yè)面跳轉(zhuǎn)到active頁(yè)面,定時(shí)器就不會(huì)執(zhí)行。
這里從me頁(yè)面跳轉(zhuǎn)到active頁(yè)面,定時(shí)器執(zhí)行。
vue路由判斷跳轉(zhuǎn)404頁(yè)面
beforeEach函數(shù) 這是路由跳轉(zhuǎn)前處理的函數(shù)
import PageNotFound from '@/views/pages/404.vue' Vue.use(Router) const routes=[ ? { ? ? path: '*', ? ? name: 'PageNotFound', ? ? component: PageNotFound, ? }, ] ? const router = new Router({ ? mode: 'history', ? routes: routes }) ? router.beforeEach((to, from, next) => { ? // ?從其他地方訪問(wèn)是否有這個(gè)地址 ? ? if(to.matched.length == 0){ ? ? ? from.path ? next({name: from.name}) : next('*') ? ? } ? ? next(); });
第二種方法就是重定向地址 同上
修改routes中的地址
? { ? ? path: '/404', ? ? name: 'PageNotFound', ? ? component: PageNotFound, ? }, ? { ? ? path:'*', ? ? redirect:'/404' ? ?}
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
如何在Vue和Spring?boot之間實(shí)現(xiàn)前后端連接
最近搭建一個(gè)Springboot+vue前后端分離項(xiàng)目,真的很簡(jiǎn)單,下面這篇文章主要給大家介紹了關(guān)于如何在Vue和Spring?boot之間實(shí)現(xiàn)前后端連接的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-05-05淺談element中InfiniteScroll按需引入的一點(diǎn)注意事項(xiàng)
這篇文章主要介紹了淺談element中InfiniteScroll按需引入的一點(diǎn)注意事項(xiàng),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06一個(gè)基于vue3+ts+vite項(xiàng)目搭建初探
當(dāng)市面上主流的組件庫(kù)不能滿足我們業(yè)務(wù)需求的時(shí)候,那么我們就有必要開發(fā)一套屬于自己團(tuán)隊(duì)的組件庫(kù),下面這篇文章主要給大家介紹了一個(gè)基于vue3+ts+vite項(xiàng)目搭建的相關(guān)資料,需要的朋友可以參考下2022-05-05Vue resource三種請(qǐng)求格式和萬(wàn)能測(cè)試地址
這篇文章主要介紹了Vue-resource三種請(qǐng)求格式和萬(wàn)能測(cè)試地址,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-09-09Vue +WebSocket + WaveSurferJS 實(shí)現(xiàn)H5聊天對(duì)話交互的實(shí)例
這篇文章主要介紹了Vue +WebSocket + WaveSurferJS 實(shí)現(xiàn)H5聊天對(duì)話交互的實(shí)例,幫助大家更好的理解和學(xué)習(xí)vue,感興趣的朋友可以了解下2020-11-11Vue實(shí)現(xiàn)Excel本地下載及上傳的方法詳解
相信大家在項(xiàng)目中經(jīng)常會(huì)遇到一些上傳下載文件的相關(guān)功能。這篇文章將為大家介紹一下Vue實(shí)現(xiàn)Excel本地下載及上傳的示例代碼,需要的可以參考一下2022-07-07使用vue3+vite導(dǎo)入圖片路徑錯(cuò)亂問(wèn)題排查及解決
使用vue3+vite開發(fā)的時(shí)候,導(dǎo)入svg圖片時(shí),同一個(gè)文件夾下的文件,其中一個(gè)路徑正常解析,另一個(gè)不行,更改文件名之后,該圖片文件就可以正常解析了,本文給大家介紹了使用vue3+vite導(dǎo)入圖片路徑錯(cuò)亂問(wèn)題排查及解決,需要的朋友可以參考下2024-03-03