图解路由守卫

一、建立一个vue3 + vant 4项目，不做细说

将以下两个文件的广告全部删除，复制粘贴vant 4中的表单代码

 

HomeView.vue 代码如下 

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
  </div>
  <van-form @submit="onSubmit">
    <van-cell-group inset>
      <van-field v-model="username" name="username" label="用户名" placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]" />
      <van-field v-model="password" type="password" name="password" label="密码" placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]" />
    </van-cell-group>
    <div style="margin: 16px;">
      <van-button round block type="primary" native-type="submit">
        提交
      </van-button>
    </div>
  </van-form>
</template>
<script>
import { ref } from 'vue';
export default {
  name: 'HomeView',
  components: {
  },
  setup() {
    const username = ref('');
    const password = ref('');
    const onSubmit = () => {
            localStorage.setItem('username', username.value)
            localStorage.setItem('password', password.value)
    };
    return {
      username,
      password,
      onSubmit,
    };
  },
}
</script>

AboutView.vue 代码如下

<template>
  <div class="about">
    <h1>路由守卫已解锁</h1>
  </div>
</template>

二、注意在全局引入组件

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import { Form, Field, CellGroup, Button } from 'vant';
const app = createApp(App);

app.use(Button).use(Form).use(CellGroup).use(Field).use(store).use(router).mount('#app')

三、绑定路由守卫 

import { createRouter, createWebHashHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView,
    
  },
  {
    path: '/about',
    name: 'about',
    component: () => import('../views/AboutView.vue'),
    meta: { isAuth: true, title:'主页' },
  }
]
const router = createRouter({
  history: createWebHashHistory(),
  routes
})

//全局前置路由守卫————初始化的时候被调用、每次路由切换之前被调用
router.beforeEach((to, from, next) => {
  //如果路由需要跳转
  if (to.meta.isAuth) {
      //判断 如果username本地存储是11的时候，可以进去
      if (localStorage.getItem('username') == 11) {
          next()  //放行
      } else {
          alert('抱歉，您无权限查看！')
      }
  } else {
      // 否则，放行
      next()
  }
})
export default router

运行结果