vueのルートガード

グローバルガード

to：target route
from：current route
next（）must call
next（false）; // Do n’t let go
next（true）; // Continue to go
next（ '/ login'）// Where to go
next（（パス： '/ login'、params：{}、query：{}}）//商品を持参

1、在登录界面，登录成功时将username存储在localStorage里面

//前置
router.beforeEach((to,from,next)=>{
//如果要去My或者index页面
  if(to.path=='/My' || to.path=='/index' ){
  //判断l如果ocalStorage里面是否有Username
    if(localStorage.getItem("username")){
   //有用户信息让它继续走
      next(true);
    }else{
      //否则让它跳转到登录界面，跳转到登录界面时，需要把to.path传入，方便在登录成功时跳转到对应界面上
      next({"path":"/Login",query:{"topath":to.path}})
    }
  }else{
  //否则去其他界面时 让它继续走
    next(true);
  }
})

ログインインターフェイスでは、ログインが成功したときに次のコードを追加する必要があります。つまり、ログインが成功した後、ログインが成功した後、ページは自動的にそのページにジャンプします。

this.$router.push(this.$router.params.topath)

メタ情報のルーティング

通常の状況では、より多くのページを保護する必要がある場合、または将来的に保護を追加する場合は、ロジックを変更する必要はありません。

ここに画像の説明を挿入
ここでは、ルーティングメタ情報の使用を簡素化するために、長いコードを記述する必要があります。

保護する必要のあるルーティング構成ごとに、上のボックスにコードを追加するだけで済みます。
次に、これを書き込むだけです。ルーティングガード。以下に示すように
ここに画像の説明を挿入

そんなに便利ではないですか？

リアガード

router.afterEach((to,from)=>{
  //全局后置守卫业务
})

専用ルーティングガード

// src/router/index.js
{
  path: '/user',
  component: User,
  beforeEnter: (to,from,next)=>{ //路由独享守卫 前置 
    console.log('路由独享守卫');
    if(Math.random()<.5){
      next()
    }else{
      next('/login')
    }
  }
 }

注：独占、投稿なし

コンポーネント内部ガード

//组件内部钩子
beforeRouteEnter (to, from, next) {//前置
  // 不！能！获取组件实例 `this`
  // 因为当守卫执行前，组件实例还没被创建
},
beforeRouteUpdate (to, from, next) {
  // 在当前路由改变，但是该组件被复用时调用
  // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
  // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
  // 可以访问组件实例 `this`
},
beforeRouteLeave (to, from, next) {//后置
  // 导航离开该组件的对应路由时调用
  // 可以访问组件实例 `this`
}

注意：

パスをガードする専用ルーティングガード

コンポーネントの内部ガード、ガードはコンポーネントです

vueのルートガード

vueのルートガード

おすすめ