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使用$http服务端收不到参数

    详解vue使用$http服务端收不到参数

    这篇文章主要介绍了vue使用$http服务端收不到参数,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • 一文搞懂Vue3.2中setup语法糖使用

    一文搞懂Vue3.2中setup语法糖使用

    在vue3版本中,引入了一个新的函数,叫做setup。本文将通过实例为大家详细讲讲Vue3.2中setup语法糖的使用,感兴趣的小伙伴可以了解一下
    2022-07-07
  • Vue Router初始化路由信息详解

    Vue Router初始化路由信息详解

    这篇文章主要为大家详细介绍了Vue Router初始化路由信息的相关知识,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的小伙伴可以了解一下
    2023-11-11
  • 解决el-tree节点过滤不显示下级的问题

    解决el-tree节点过滤不显示下级的问题

    这篇文章主要介绍了解决el-tree节点过滤不显示下级的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • Vue项目中props传值时子组件检测不到的问题及解决

    Vue项目中props传值时子组件检测不到的问题及解决

    这篇文章主要介绍了Vue项目中props传值时子组件检测不到的问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • vue如何设置动态的栅格占位、水平偏移量、类名、样式

    vue如何设置动态的栅格占位、水平偏移量、类名、样式

    这篇文章主要介绍了vue如何设置动态的栅格占位、水平偏移量、类名、样式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • Vue项目启动白屏问题的几种解决办法

    Vue项目启动白屏问题的几种解决办法

    这篇文章主要给大家介绍了关于Vue项目启动白屏问题的几种解决办法,Vue项目打包后出现白屏的可能原因有很多,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2023-12-12
  • vue-quill-editor富文本编辑器超详细入门使用步骤

    vue-quill-editor富文本编辑器超详细入门使用步骤

    vue中很多项目都需要用到富文本编辑器,在使用了ueditor和tinymce后,发现并不理想,所以果断使用vue-quill-editor来实现,下面这篇文章主要给大家介绍了关于vue-quill-editor富文本编辑器入门使用步骤的相关资料,需要的朋友可以参考下
    2022-08-08
  • Vue手动埋点设计的方法实例

    Vue手动埋点设计的方法实例

    这篇文章主要给大家介绍了关于Vue手动埋点设计的相关资料,内容简明扼要并且容易理解,绝对能使你眼前一亮,需要的朋友可以参考下
    2022-03-03
  • vue中tinymce的使用实例详解

    vue中tinymce的使用实例详解

    TinyMCE Vue是TinyMCE官方发布的Vue组件,可以更轻松地在Vue应用程序中使用TinyMCE,这篇文章主要介绍了vue中tinymce的使用,需要的朋友可以参考下
    2022-11-11

最新评论