路由守卫,登录设置

81 阅读1分钟

登录路由配置:

router.beforeEach((to,from,next)=>{
if(to.name === 'login'){
  next()
}else{
  if(!localStorage.getItem("token")){
    next({
      path:'login'
    })
  }else{
    ConfigRouter()//一个自定义函数
  }
}
})


// const ConfigRouter = ()=>{
//   routerConfig.forEach(item=>{
//     router.addRoute("mainbox",item)
//   })
// } 

路由配置:www.bilibili.com/video/BV11s…

1.配置重定向、配置notfound

{
    path:'/',
    redirect:'/index'
  },{
    path:':pathMatch(.*)*',
    name:"Notfound",
    component: NotFound
  }

2.element-ui-plus

区别:挂载之后直接使用即可

3.粒子库

www.npmjs.com/package/par… image.png

4.验证表单提交

 //提交表单的函数
 const submitForm=()=>{
  loginFormRef.value.validate((valid)=>{
console.log(valid);
if(valid){
  console.log(loginForm);
}
  })
 }

5.store持久化插件

作用:页面刷新之后仍然存在 github.com/robinvdvleu… image.png

6.可以将传递的index直接作为路由的跳转地址使用

image.png 7.布局展示正常时

<el-container direction="vertical">