前后端分离项目-社交管理系统之前后端连载，主界面的搭建的展示实现登录注册按钮展示对应的组件 路由的配置和使用 学习笔记(三)

前端vue路由配置，组件联动

现在已经成功把主页面的框架搭建好，背景图片，各种按钮已经写好。一般我们按钮用a标签来展示，然后可能跳转到href属性里的路径中。

但是

如果按照传统的想法继续进行开发。首先我们得需要好多的html。并且每个页面中如果有同样的部分，比如上导航栏以及Footer部分。我们几乎每个页面都要有。而他们都是组件，他们的样式以及HTML都是写在组件文件夹的.vue文件中。如果要使用多个html进行注册，登录的跳转显然不够好。引入vue-router插件。我们想进行单页开发，只用一个html，其他都用组件解决。

vue-routet

1.首先，在src文件夹下创建一个新的文件夹：router。然后新建js文件：index.js。
2.在js文件中

import Vue from 'vue'
import Router from 'vue-router'
//引入组件
import Landing from '../components/Landing.vue'
import Login from '../components/Login.vue'
import Register from '../components/Register.vue'
Vue.use(Router);

export default new Router({
	mode:'history',
	linkActiveClass:"active",
	routes:[
		{path:"*",redirect:"/"},
		{path:"/",component:Landing},
		{path:"/login",component:Login},
		{path:"/register",component:Register}
	]
})

（1）引入vue以及router路由
（2）引入组件，我们想到，需要进行变化的是中间的部分，也就是我们想要点击注册，landing.vue变成register.vue并且展示对应的注册组件。
（3）Vue.use（Router）使用路由
（4）“抛出”Router。
（5）当/为路径时，即是默认。为Landing，当router-link标签to属性为/login时，展示登录.vue
这么介绍和记录有点不太难表达关于vue-rouer插件的魅力。
指路=》》》》》》》》》》》》》https://blog.csdn.net/wulala_hei/article/details/80488727。这篇博客详细地介绍了关于vue-rouer。我只记录下如何使用。后续再继续对vue单页开发进一步研究。

使用

首先在App.vue中

	<keep-alive>
		<router-view></router-view>
	</keep-alive>

哪里要用呢。上导航栏的注册登录。
好，接着来到NavBar.vue中

 <ul class="navbar-nav ml-auto">
				<li class="nav-item">
				  <router-link class="nav-link" to="/Login">
					登录
				  </router-link>
				</li>
				<li class="nav-item">
				  <router-link class="nav-link" to="/Register">
					注册
				  </router-link>
				</li>
	        
	          </ul>

router-link标签，to属性。类似于a标签和href。也就是当我们点击的时候url后面会被加上/login。前面我们已经配置过，当结尾是/login时则展示跳转组件。这样我们就可以成功进行单页开发。不需要跳转新的html。我们只用了一个html。那个HTML在前面介绍过。引入了各种框架的css，js。bootstrap等。因为我们想要的按钮可以直接btn btn-lg btn-info 来改变按钮样式等等。

效果

路由使用起来还是比较简单。但是进一步了解还需要参考前辈的博客经验等等。