vue 路由判断方式

 更新时间:2022年10月17日 10:32:04   作者:优雅格子衫  
这篇文章主要介绍了vue 路由判断方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

vue 路由判断

解决的一个问题分享。我的需求是从特定的页面进入当前页面会执行一个定时器来增加阅读人数,当进入该页面15秒后浏览人数会增加1。

话不多说直接上代码。先在methods里定义一个定时器方法和一个修改浏览人数方法。

methods: { 
      // 增加阅读人数
      setpeople(){
        console.log('定时器开启');
        // overTimer 这个值可以写在data里面 
        //也可以直接用 const overTimer = setTimeout(() =>{},15000)
        this.overTimer = setTimeout(() => {
          this.artical_peo = this.artical_peo + 1
          this.setpeo()
        }, 15000)
      },
      // 修改阅读人数
      setpeo(){
        let params = `artical_peo=${this.artical_peo}&&id=${this.id}`
        this.axios.put('/read',params).then(res=>{
          // console.log(res);
        })
      },

写完之后要用到一个钩子函数beforeRouteEnter来进行路由的相关操作

        // 超时定时器
        overTimer: 15000,
        sname:''
      }
    },
    // 监测路由跳转
    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);
      });
    },

这个函数可以检测到你从那个页面跳转到某个页面。

 vm.sname = from.name 这个是把某个跳转过来页面的路由给赋值到sname里面,然后在做下一步判断。

这里直接在mounted里面写一个判断 就是如果从scang页面跳转过来就不执行这个定时器,浏览人数也就不会增加。反之从别的页面来浏览我的文章就执行定时器来增加浏览人数。

mounted () {
      // 判断当前跳转过来的页面如果是 scang 就不启动定时器
      if(this.sname == 'Scang'){
        //清除定时器
        clearTimeout(this.setpeople)
      }else{
        // 开启定时器 当点进来浏览够15秒后阅读量加一
        this.setpeople()
      }
    },

 这里就是从scang页面跳转到active页面,定时器就不会执行。

这里从me页面跳转到active页面,定时器执行。

vue路由判断跳转404页面

beforeEach函数 这是路由跳转前处理的函数

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'
   }

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 如何在Vue和Spring boot之间实现前后端连接

    如何在Vue和Spring boot之间实现前后端连接

    最近搭建一个Springboot+vue前后端分离项目,真的很简单,下面这篇文章主要给大家介绍了关于如何在Vue和Spring boot之间实现前后端连接的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-05-05
  • 浅谈element中InfiniteScroll按需引入的一点注意事项

    浅谈element中InfiniteScroll按需引入的一点注意事项

    这篇文章主要介绍了浅谈element中InfiniteScroll按需引入的一点注意事项,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-06-06
  • 一个基于vue3+ts+vite项目搭建初探

    一个基于vue3+ts+vite项目搭建初探

    当市面上主流的组件库不能满足我们业务需求的时候,那么我们就有必要开发一套属于自己团队的组件库,下面这篇文章主要给大家介绍了一个基于vue3+ts+vite项目搭建的相关资料,需要的朋友可以参考下
    2022-05-05
  • Vue resource三种请求格式和万能测试地址

    Vue resource三种请求格式和万能测试地址

    这篇文章主要介绍了Vue-resource三种请求格式和万能测试地址,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-09-09
  • VueJS事件处理器v-on的使用方法

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

    本篇文章主要介绍了VueJS事件处理器v-on的使用方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • vue的webcamjs集成方式

    vue的webcamjs集成方式

    这篇文章主要介绍了vue的webcamjs集成方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例

    Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例

    这篇文章主要介绍了Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例,帮助大家更好的理解和学习vue,感兴趣的朋友可以了解下
    2020-11-11
  • Vue实现Excel本地下载及上传的方法详解

    Vue实现Excel本地下载及上传的方法详解

    相信大家在项目中经常会遇到一些上传下载文件的相关功能。这篇文章将为大家介绍一下Vue实现Excel本地下载及上传的示例代码,需要的可以参考一下
    2022-07-07
  • vue中路由的前进和后退问题

    vue中路由的前进和后退问题

    这篇文章主要介绍了vue中路由的前进和后退问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • 使用vue3+vite导入图片路径错乱问题排查及解决

    使用vue3+vite导入图片路径错乱问题排查及解决

    使用vue3+vite开发的时候,导入svg图片时,同一个文件夹下的文件,其中一个路径正常解析,另一个不行,更改文件名之后,该图片文件就可以正常解析了,本文给大家介绍了使用vue3+vite导入图片路径错乱问题排查及解决,需要的朋友可以参考下
    2024-03-03

最新评论