摘要

如图,创完之后的样子组件路由 vue router 是 Vue.js 官方的路由管理器。它和Vue.js的核心深度集成，让构建 单页面应用变得易如反掌。

前端平台搭建(Vue2.6,App:HBulderX)

创建Vue2.6项目

如图,创完之后的样子

下载相应插件方便开发

路由配置

组件路由 vue router 是 Vue.js 官方的路由管理器。

它和Vue.js的核心深度集成，让构建 单页面应用变得易如反掌。

安装 vue-router 是一个插件包，所以我们还是需要用npm来进行安装的。

打开命令行工具，进入你的项目目录，输入下面命令。

npm i vue-router@3.5.3  

搭建步骤: 1. 创建router目录 创建index.js 文件,在其中配置路由

import Vue from 'vue'; import router from 'vue-router'; /* 导入路由 */  import login from '../views/login'; /* 导入其他组件 */  import content from '../components/content'; /* 导入其他组件 */ Vue.use(router) /* 定义组件路由 */ var rout = new router({ 	routes: [ {  	path: '/index',  	name: 'index',     component: index },{     path: '/content',      component: content }      ] }); //导出路由对象 export default rout; 

2.使用路由 首页 内容

<rounter-link to="/[pathName]"></rounter> <router-view></router-view> // 显示组件 

3.在main.js 中配置路由

 import router from './router/index.js'   Vue.use(router);   new Vue({  	el: '#app',   	router,   	render: h => h(App)   }) 

4.我们也可以对其进行路由嵌套

{ 	path: '/main',  	component: Main, //路由嵌套 在main下面的嵌套子路由 	children:[{  			    path:"/admin", 				 component:Admin  	}] } 

5.还有对其进行路由守卫(写在index.js目录下) 主要来实现登录功能

rout.beforeEach((to, from, next) => {  	if (to.path == '/index') { 		// 如果用户访问的登录页， 直接放行 		return next(); 	} else {  		var account = window.sessionStorage.getItem("account"); 		if (account == null) { //用户信息为空,说明用户没有登录 			return next("/index"); 		} else { 			return next(); 		} 	} }) 

6.展示相应界面

//路由跳转 <router-link to = "[path]"></router-link> //跳转到[path]界面显示 <router-view></router-view> 

path:'/'表示默认界面为 info.vue

对连接后端进行一些配置(main.js文件)

导入ElementUI组件

安装指令如下

npm i element-ui-S 

ElementUI 组件可以用来快速搭建前端外观

组件 | Element

同步与异步

• 同步:同时只能做一件事

  • 同步请求

    当前端向后端发送请求时,此时客户端一切操作都会终止,服务器响应回来的内容会覆盖当前网页中的内容,一次只能做一件事,与服务器交互其他操作就不能做了

与服务器交互后会覆盖当前界面

• 异步:同时可以做多件事

  • 异步请求

    当客户端与服务器交互时,不影响客户端页面的其他操作,同时做两件事,

    服务器响应回来的内容不会覆盖整个页面

axios异步请求框架

1. axios 是一个 HTTP 的网络请求库. 安装 npm install axios
2. 在main.js中导入axios

import axios from 'axios'; //设置访问后台服务器地址 axios.defaults.baseURL="http://127.0.0.1:9999/api/"; //将axios挂载到 vue全局对象中,使用this可以直接访问 Vue.prototype.$http=axios; //使用get或post方法即可发送对应的请求 //then 方法中的回调函数会在请求成功或失败时触发 //通过回调函数的形参可以获取响应内容，或错误信息  //基本语法 this.$http.get("地址?"+Key=value&key2=val1).then(function(response){      } this.$http.post("login",{key:"value",key2:"val2"}).then(function(response){      } 

具体配置如下

到此基本配置完毕,那我们进行简单一个界面展示一下

大功告成!!!