效果参照图如下:    

   不好意思因为内容过多，不能单独给大家分解 一一说明

          发的代码图,里面代码我每个都备注了意思和一些拓展知识,大家慢慢参考(#^.^#)!!!

                            有需要代码可以评论我会给你传一份哒 (*^▽^*)

1)未登录和未注册页面效果

                                        2)当注册或登录了时,效果图 

 效果要求: 1)路由栅栏效果  实现有些页面需要登录才能进入页面  2)实现登录和注册的效果   3)登录了时按退出效果

 一.路由设置栅栏        

ps: ! -----这时候如果页面需要登录的话就会调转到index.vue的末班中 

二.路由登录写完了,我们来看看登录和注册的效果吧

                                     a.设置一总组件,用于控制登录和注册的页面切换

                                                         a-1.登录组件

已知数据:

 !!!!  登录组件

                                                        a-2:注册页面 

已知数据: 

 !!!!!注册组件:

三.退出按钮效果 

ps:已知登录和注册已完成,看图三效果图的右上角的退出按钮,实现他的效果

已知登录后的token值我们存储到了vuex 中:

ps: 这时候我们只需要操作退出按钮就好了,给按钮添加单击事件

      已知数据: 

     !!! 处理点击退出事件:

 今天的效果就此结束了(●'◡'●)

             欢迎来探讨你的不懂,看到我会一一解答的哦 ＯＫ(ゝω・´★)!!! 

                            感谢您的浏览(♡ ὅ ◡ ὅ )ʃ♡ 嘻嘻