这段时间在用Vue做一个项目时,遇到了一个需求。用户如果没有登录,在点击导航栏按钮时,就不能进入某些页面。

以前在用原生Js写时,这个需求都是交给后端去处理的,但因为Vue来是单页面框架,所以就不需要交给后端去处理了。

最开始我是在按钮上设置了如果用户是没有登录的状态,就不执行跳转行为,但我在浏览器的URL地址栏中输入要跳转的页面地址时,就能跳转过去,没有被阻拦,最后我用了Vue中的 $router来解决。

watch: {
    $route (to, from) { //to:即将要跳转到的页面   from:即将离开的页面
      if (to.path === '/write' && this.$store.state.usertf === '1') {
        alert('想进去?没门,快滚去登录!')
        this.$router.push('/home')
        this.$emit('denglu')
      } else if (to.path === '/home') {
        this.$router.push('/home')
      }
    }
  },

在组件中用 watch来监听 $router的变化,这样不管是点击导航栏按钮还是在URL地址栏中输入地址,它都能检测到,然后再来根据要跳转哪个页面再来做出处理是否要放行的处理,这样就能实现这个需求了。

注意:只能监听子路由的路由变化,同级或者父级路由的变化是监听不到的,如果要全局监听路由变化,可以在App.vue文件中监听。

Logo

前往低代码交流专区

更多推荐