实现一个网页未登录时主动跳转至登录界面？
在地址栏输出url之后，如果以后localStorage中并未存储==token==并且咱们要去的网页并不是登录页面，可想而知，该当强制跳转至登录页面。这里就能够利用vue-router的路由守卫来实现。
- 利用
beforeEach，当token存在或者要去往的页面是登录页面（我要登录总还是能够的吧~），间接放行； - 否则，利用next跳转至登录界面（路由为'/login'）
// src/router/index.jsrouter.beforeEach((to, from, next) => { const token = localStorage.getItem('token') if (token || to.path === '/login') { next() } else { next('/login') }})用户名与明码正确后登录又如何跳转至首页（或者其余页面）？
实现了下面的束缚之后，咱们就能够来实现登录性能了。
当用户名明码正确之后，点击登录，但这时咱们还无奈跳转至首页，因为下面的路由守卫中还须要token，咱们应能从后端获取到token，并将该token存入localStorage中，并利用router.replace('/')来进行路由跳转。
以下是一个小例子：
// 利用element plus的表单性能const submitForm = (formRef) => { formRef.validate((valid) => { if (valid) { // 如果表单校验胜利并且用户名和明码正确，则将token存储起来，并跳转至首页 if (loginForm.value.username === 'admin' && loginForm.value.password === 'admin') { localStorage.setItem('token', 'i have token!') router.replace('/') } } else { console.log('error') } })}