基于Vue、Vue-router、Vuex仿简书网站（三）

继续上两篇文章，附上两篇文章的地址。没看过的同学可以去看看。今天主要讲解登录组件部分和下载部分，也是最简单的部分。今天讲完之后，笔者需要集中精力练习后端，争取能够和数据库进行交互，然后再继续写下去。基于Vue、Vue-router、Vuex仿简书网站（二）基于Vue、Vue-router、Vuex仿简书网站（一）登录界面比较简单，辅助线就不画了，以及登录组件可以看到该部分有两个功能，登录和注册，需要根据用户的点击切换页面内容。直接上代码：我这里看到我页面内容的方式是通过vue的v-if函数显示不同的内容，我通过v-if中的变量vuex的getters是获取到的，为什么要这样做呢？因为如果我只是切换当前页面，我不需要这样做，但是我们在App.vue中提供了一个注册按钮。如果不通过VUEX，注册按钮还是会显示登录界面，而不是注册界面。或者可以使用事件分发来分发loginway参数，但是这样做太麻烦了，所以我在state中新建了一个loginway变量，这样无论我在哪里点击注册或者登录事件，对应的界面都可以显示出来，如下是actions.js的部分代码和store.js的部分代码：state={loginway='login'}constmutations={CHANGELOGIN(statem,loginway){state.loginway=loginway}}完成这些之后，一个登录界面的UI就做好了下载界面只需要在router.map下添加路由即可。没有数据交互，直接给代码：main.js部分importVuefrom'vue'importAppfrom'./App'importVueRouterfrom'vue-router'importhomefrom'./components/Home.vue'从'./components/Topic.vue'导入主题从'./components/Article.vue'导入文章从'./components/Bonus.vue'导入奖金'从'./components/Login.vue'导入登录topic_articlefrom'./components/Topic_article.vue'importdownloadfrom'./components/Download.vue'Vue.use(VueRouter)constrouter=newVueRouter()router.map({'/home':{component:home,subRoutes:{'/article':{component:article}}},'/topic':{component:topic,subRoutes:{'topic_article':{component:topic_article}}},'/bonus':{component:bonus},'/login':{component:login},'/download':{component:download}})router.redirect({'*':'/home/article'})router.start(App,'app')router.go('/home/article')可以看到新增了下载路由接下来是download.vue部分：这里，一个比较简单的简书首页的首页就完成了。相信大家按照我的步骤，应该对vue-router和vuex有了一定的了解。简而言之，它既有趣又易于学习。希望我的文章能帮到你。开门进入vue，还是那句球球求收藏，有错请指正！！！