亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

vue?路由判斷方式

 更新時間:2022年10月17日 10:32:04   作者:優(yōu)雅格子衫  
這篇文章主要介紹了vue?路由判斷方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教

vue 路由判斷

解決的一個問題分享。我的需求是從特定的頁面進(jìn)入當(dāng)前頁面會執(zhí)行一個定時器來增加閱讀人數(shù),當(dāng)進(jìn)入該頁面15秒后瀏覽人數(shù)會增加1。

話不多說直接上代碼。先在methods里定義一個定時器方法和一個修改瀏覽人數(shù)方法。

methods: { 
      // 增加閱讀人數(shù)
      setpeople(){
        console.log('定時器開啟');
        // overTimer 這個值可以寫在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);
        })
      },

寫完之后要用到一個鉤子函數(shù)beforeRouteEnter來進(jìn)行路由的相關(guān)操作

        // 超時定時器
        overTimer: 15000,
        sname:''
      }
    },
    // 監(jiān)測路由跳轉(zhuǎn)
    beforeRouteEnter (to, from, next) {
       console.log('要跳到的頁面',to.name)
       console.log('從那個頁面跳過來',from.name)
      //  console.log(next)
      next(vm =>{
        //這里把獲取到的from.name給到data里面定義的sname
        vm.sname = from.name
        // console.log(vm.sname);
      });
    },

這個函數(shù)可以檢測到你從那個頁面跳轉(zhuǎn)到某個頁面。

 vm.sname = from.name 這個是把某個跳轉(zhuǎn)過來頁面的路由給賦值到sname里面,然后在做下一步判斷。

這里直接在mounted里面寫一個判斷 就是如果從scang頁面跳轉(zhuǎn)過來就不執(zhí)行這個定時器,瀏覽人數(shù)也就不會增加。反之從別的頁面來瀏覽我的文章就執(zhí)行定時器來增加瀏覽人數(shù)。

mounted () {
      // 判斷當(dāng)前跳轉(zhuǎn)過來的頁面如果是 scang 就不啟動定時器
      if(this.sname == 'Scang'){
        //清除定時器
        clearTimeout(this.setpeople)
      }else{
        // 開啟定時器 當(dāng)點進(jìn)來瀏覽夠15秒后閱讀量加一
        this.setpeople()
      }
    },

 這里就是從scang頁面跳轉(zhuǎn)到active頁面,定時器就不會執(zhí)行。

這里從me頁面跳轉(zhuǎn)到active頁面,定時器執(zhí)行。

vue路由判斷跳轉(zhuǎn)404頁面

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) => {
? // ?從其他地方訪問是否有這個地址
? ? if(to.matched.length == 0){
? ? ? from.path ? next({name: from.name}) : next('*')
? ? }
? ? next();
});

第二種方法就是重定向地址 同上

修改routes中的地址

? {
? ? path: '/404',
? ? name: 'PageNotFound',
? ? component: PageNotFound,
? },
? {
? ? path:'*',
? ? redirect:'/404'
? ?}

以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • 如何在Vue和Spring?boot之間實現(xiàn)前后端連接

    如何在Vue和Spring?boot之間實現(xiàn)前后端連接

    最近搭建一個Springboot+vue前后端分離項目,真的很簡單,下面這篇文章主要給大家介紹了關(guān)于如何在Vue和Spring?boot之間實現(xiàn)前后端連接的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2023-05-05
  • 淺談element中InfiniteScroll按需引入的一點注意事項

    淺談element中InfiniteScroll按需引入的一點注意事項

    這篇文章主要介紹了淺談element中InfiniteScroll按需引入的一點注意事項,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-06-06
  • 一個基于vue3+ts+vite項目搭建初探

    一個基于vue3+ts+vite項目搭建初探

    當(dāng)市面上主流的組件庫不能滿足我們業(yè)務(wù)需求的時候,那么我們就有必要開發(fā)一套屬于自己團(tuán)隊的組件庫,下面這篇文章主要給大家介紹了一個基于vue3+ts+vite項目搭建的相關(guān)資料,需要的朋友可以參考下
    2022-05-05
  • Vue resource三種請求格式和萬能測試地址

    Vue resource三種請求格式和萬能測試地址

    這篇文章主要介紹了Vue-resource三種請求格式和萬能測試地址,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下
    2018-09-09
  • VueJS事件處理器v-on的使用方法

    VueJS事件處理器v-on的使用方法

    本篇文章主要介紹了VueJS事件處理器v-on的使用方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-09-09
  • vue的webcamjs集成方式

    vue的webcamjs集成方式

    這篇文章主要介紹了vue的webcamjs集成方式,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-11-11
  • Vue +WebSocket + WaveSurferJS 實現(xiàn)H5聊天對話交互的實例

    Vue +WebSocket + WaveSurferJS 實現(xiàn)H5聊天對話交互的實例

    這篇文章主要介紹了Vue +WebSocket + WaveSurferJS 實現(xiàn)H5聊天對話交互的實例,幫助大家更好的理解和學(xué)習(xí)vue,感興趣的朋友可以了解下
    2020-11-11
  • Vue實現(xiàn)Excel本地下載及上傳的方法詳解

    Vue實現(xiàn)Excel本地下載及上傳的方法詳解

    相信大家在項目中經(jīng)常會遇到一些上傳下載文件的相關(guān)功能。這篇文章將為大家介紹一下Vue實現(xiàn)Excel本地下載及上傳的示例代碼,需要的可以參考一下
    2022-07-07
  • vue中路由的前進(jìn)和后退問題

    vue中路由的前進(jìn)和后退問題

    這篇文章主要介紹了vue中路由的前進(jìn)和后退問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • 使用vue3+vite導(dǎo)入圖片路徑錯亂問題排查及解決

    使用vue3+vite導(dǎo)入圖片路徑錯亂問題排查及解決

    使用vue3+vite開發(fā)的時候,導(dǎo)入svg圖片時,同一個文件夾下的文件,其中一個路徑正常解析,另一個不行,更改文件名之后,該圖片文件就可以正常解析了,本文給大家介紹了使用vue3+vite導(dǎo)入圖片路徑錯亂問題排查及解決,需要的朋友可以參考下
    2024-03-03

最新評論