该文章由此教程实践而来,如有疑问请有先参照此教程

---

定义路由的时候可以配置meta字段,如下例所示:

{
    path:"/test",
    props: route => { return { query: route.query.q }},
    component:()=>import("../components/test.vue"),
    meta:{requireAuth:true}
}

下方使用beforeEach方法做如下定义

router.beforeEach((to,from,next)=>{
  if(to.matched.some(item => item.meta.requireAuth)){
    window.alert("请登录后操作");
    next("/login");
  }else{
    next();
  }
})

some的用法查看这里

结果如下图所示: