Vue前端框架（路由安装、使用、搭建，网络请求，路由导航守卫，axios的请求拦截和响应拦截）

Vue路由

vue router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建 单页面应用变得易如反掌

安装

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

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

npm install vue-router --save-dev

使用步骤，搭建：

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.使用路由

首页

内容

3.在 main.js 中配置路由

import router from ‘./router’

Vue.use(router);

new Vue({

el: ‘#app’,

router,

render: h => h(App)

})

注：在Vue中没有页面的的概念，只有组件的概念呢如login.vue文件就是一个登录组件

Vue的网路请求：

axios 是一个 HTTP 的网络请求库.

1.安装 npm install axios

在 main.js 中配置 axios

​ 导入 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=values).then(