vue?路由判斷方式
vue 路由判斷
解決的一個問題分享。我的需求是從特定的頁面進入當前頁面會執(zhí)行一個定時器來增加閱讀人數(shù),當進入該頁面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來進行路由的相關(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 () {
// 判斷當前跳轉(zhuǎn)過來的頁面如果是 scang 就不啟動定時器
if(this.sname == 'Scang'){
//清除定時器
clearTimeout(this.setpeople)
}else{
// 開啟定時器 當點進來瀏覽夠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)前后端連接
最近搭建一個Springboot+vue前后端分離項目,真的很簡單,下面這篇文章主要給大家介紹了關(guān)于如何在Vue和Spring?boot之間實現(xiàn)前后端連接的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-05-05
淺談element中InfiniteScroll按需引入的一點注意事項
這篇文章主要介紹了淺談element中InfiniteScroll按需引入的一點注意事項,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2020-06-06
Vue +WebSocket + WaveSurferJS 實現(xiàn)H5聊天對話交互的實例
這篇文章主要介紹了Vue +WebSocket + WaveSurferJS 實現(xiàn)H5聊天對話交互的實例,幫助大家更好的理解和學習vue,感興趣的朋友可以了解下2020-11-11

