1. ルーティング ガードは次のとおりです。
例えば、モール内のショッピングカートをクリックする際、ログインしているかどうかを判断する必要があり、ログインしていない場合はログインページにリダイレクトされ、ログインしている場合はリダイレクトされます。セキュリティチェックの警備員に相当するショッピングカートページへ。
ルート ガードには次の 3 つのタイプがあります。
1: グローバル フック: beforeEach、afterEach
2: 排他的ガード (単一ルート内のフック): beforeEnter、beforeLeave
3: コンポーネント内ガード: beforeRouteEnter、beforeRouteUpdate、beforeRouteLeaveグローバルガード
router.beforeEach() は、入る前にトリガーします
router.afterEach() は入力後にトリガーされ、
各ガード メソッドは 3 つのパラメーターを受け取ります。①to：Route：入力対象のルーティングオブジェクト（toは入力するルーティングオブジェクトであるオブジェクトであり、to.pathはルーティングオブジェクト内のプロパティを呼び出すために使用できます）
②from: Route: 現在のナビが出発するルート
③next: 関数: これは必ず呼び出さなければならないメソッドであり、実行効果は next メソッドの呼び出しパラメータに依存します。
【ルーティングガードはmain.jsファイル、またはrouterフォルダ配下のindex.jsファイルに記述】
①プリルートガード（各スイッチの前に呼ばれる）
最初に、ルーティング ガードを構成する必要がある場所に meta: { isAuth: true } を追加します。
{
path: '/',
name: 'Home',
component: () => import('../views/Home.vue'),
meta: { isAuth: true, title:'主页' },
},//全局前置路由守卫————初始化的时候被调用、每次路由切换之前被调用
router.beforeEach((to, from, next) => {
//如果路由需要跳转
if (to.meta.isAuth) {
//判断 如果school本地存储是qinghuadaxue的时候，可以进去
if (localStorage.getItem('school') === 'qinghuadaxue') {
next() //放行
} else {
alert('抱歉，您无权限查看！')
}
} else {
// 否则，放行
next()
}
})②ポストルートガード（スイッチごとに呼び出される）
ルートがリダイレクトされた後に実行されるイベントであり、ルートがリダイレクトされた後に Web ページの名前を変更するために使用できます。
まず、ルートのメタでタイトルの名前を設定する必要があります
{
path: '/',
name: 'Home',
component: () => import('../views/Home.vue'),
meta: { isAuth: true, title:'主页' },
},//全局后置路由守卫————初始化的时候被调用、每次路由切换之后被调用
router.afterEach((to, from) => {
document.title = to.meta.title || '默认名' //修改网页的title
})③専用ルートガード（あるルートだけが楽しめるルートガード）
専用ルートガードはフロントのみでリアはありません
{
path: '/',
name: 'Home',
component: () => import('../views/Home.vue'),
meta: { isAuth: true },
beforeEnter: (to, from, next) => {
if (to.meta.isAuth) { //判断是否需要授权
if (localStorage.getItem('school') === 'qinghuadaxue') {
next() //放行
} else {
alert('抱歉，您无权限查看！')
}
} else {
next() //放行
}
}
},④インコンポーネントガード（あるルートが単独で楽しむルートガード）
排他的ルーティング ガードは前面のみで背面はなく、.vue ファイルに直接書き込まれます。
//通过路由规则，进入该组件时被调用
beforeRouteEnter(to,from,next) {
if(toString.meta.isAuth){
if(localStorage.getTime('school')==='qinghuadaxue'){
next()
}else{
alert('学校名不对，无权限查看！')
}
} else{
next()
}
},
//通过路由规则，离开该组件时被调用
beforeRouteLeave(to,from,next) {
next()
}