一、建立一个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
运行结果