vue-router的全局钩子beforeEach

在我们浏览网页时，经常遇到当点击某个页面时会让我们先进行登录然后再进入目标页面，那么怎么设置这样的逻辑呢？在vue官网给出定义为全局钩子，还有一些当我们编辑文本时，如果点击关闭，会先跳出一个提示，让你选择是否关闭，本章在这里只叙述第一种情况。<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>T

gang456789

7917人浏览 · 2017-09-20 09:09:38

gang456789 · 2017-09-20 09:09:38 发布

在我们浏览网页时，经常遇到当点击某个页面时会让我们先进行登录然后再进入目标页面，那么怎么设置这样的逻辑呢？在vue官网给出定义为全局钩子，还有一些当我们编辑文本时，如果点击关闭，会先跳出一个提示，让你选择是否关闭，本章在这里只叙述第一种情况。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <div id="app">
      <keep-alive>
          <router-view></router-view>
      </keep-alive>
      <router-link to="/news/123456/1"></router-link>
      <router-link :to="{name:'home',query:{id:1,pwd:2}}">honme</router-link>
      <router-link :to="{name:'news',params:{id:11,pwd:12}}">news</router-link>
      ／／news为目标页面，到那个我们想跳到news页面时必须先进行判断
      <input type="button" value="go" @click="gourl">
  </div>
  <template id="home">
      <div>
          home
      </div>
  </template>
  <template id="news">
    <div>
        news
    </div>
</template>
  <template id="login">
      <div>
          <input type="text" v-model="name">
          <input type="text" v-model="pwd">
          <input type="button" value="登录" @click="login">
      </div>
  </template>
  <script src="../vue.min.js"></script>
  <script src="../vue-router.js"></script>
  <script>
      var home={
          template:'#home',
          created(){
              //alert('home created')
          }
      }
      var news={
          template:'#news',
          created(){
              //alert('news created')
          }
      }
      var login={
          data(){
            return{
                name:'',
                pwd:''
            }
          },
          template:'#login',
          methods:{
              login(){
                  sessionStorage.setItem('user',{name:this.name,pwd:this.pwd})
                  this.$router.push(this.$route.query.redirect)
                  ／／这里为路由的固定写法
              }
          }
      }
      var router=new VueRouter({
          /*mode:'history',*/
          routes:[
              {
                  path:'/home',
                  component:home,
                  name:'home'
              },
              {
                  name:'news',
                  path:'/news/:id/:pwd',
                  component:news,
                  meta:{
                      /*标明需要登录*/
                      auth:true
                  }
                  ／／因为我们要对new进行判断，所以必须再其路由上增加一个meta属性，对于里面的auth是我们自己进行命名的
              },
              {
                  name:'login',
                  path:'/login',
                  component:login
              }

          ]
      })
      router.beforeEach(function (to,from,next) {
          //console.log(to,from,next)
          //需求登录判断
          if(to.meta.auth){
              /*不为空*/
              if(sessionStorage.getItem('user')){
                  next();
              }else{
                  next('/login?redirect='+to.fullPath)
                  ／／这里与上面的相对应，此处也可以写成
                ／***  next({
                     path: '/login',
                      query: { redirect: to.fullPath }
                  })***／
                  ／／上面为另外一种写法
              }
          }
          else{
              next();
          }
      })
      new Vue({
          el:'#app',
          router,
          methods:{
              gourl(){
                  /*history.go()*/
                  this.$router.go(1);
                  //this.$router.push('/news/11/22');
                  this.$router.push({name:'news',params:{id:1110,pwd:12}})
              }
          }
      })
  </script>
</body>
</html>

当我们在用vue-cli做项目时， router.beforeEach的正确位置应当放到main.js中，
小生初出茅庐，欢迎各位大神指点迷津，

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^