Vue-Router、axios的用法、axios全局配置、axios拦截器、async/await用法

程序员文章站 2022-03-18 16:14:28

...

1.前端路由的概念
根据不同的用户事件，显示不同的页面内容

2.Vue-Router的的基本使用

1.导入js文件

先导入vue.js，再导入vue-router
<script src="lib/vue_2.5.22.js"></script>
<script src="lib/vue-router_3.0.2.js"></script>

2.添加路由连接，
《router-link》是路由中提供的标签，默认会被渲染为a标签，to属性默认被渲染为href属性
to属性的值会被渲染为#开头的hash地址

<router-link to="/user">User</router-link>
<router-link to="/login">Login</router-link>

3.添加路由填充位（路由占位符）

<router-view></router-view>

4.自定义路由

var User = { template:"<div>This is User</div>" }
var Login = { template:"<div>This is Login</div>" }

5.配置路由规则并创建路由实例

var myRouter=new VueRouter({
	//routes是路由规则数组
	routes:[
		//每一个路由规则都是一个对象，至少包含path和component两个属性
		//path匹配的hash地址
		//component表示路由匹配的组件
		{path:'/user',component:User}
	]
)

6.将路由挂载到Vue实例中

new Vue({
    el:"#app",
    //通过router属性挂载路由对象
    router:myRouter
})

3.路由重定向
通过路由重定向可以设置默认的展示组件

默认/访问的就是主页
{path:'/',redirect:'/index'}

4.嵌套路由
路由嵌套就是在路由里面还有子路由，主要是通过在路由规则里面添加一个children属性来匹配子路由配置信息，
添加子路由的话，要在父组件添加路由占位符<router-view> Vue-Router、axios的用法、axios全局配置、axios拦截器、async/await用法
5.动态路由匹配
不同的路由，可以匹配到同一个组件。
可以通过$route.params.id拿到传递过来的参数

// 动态路径参数 以冒号开头
//像 /user/foo 和 /user/bar 都将映射到相同的路由。
    { path: '/user/:id', component: User }

6.路由传参
Vue-Router、axios的用法、axios全局配置、axios拦截器、async/await用法

7.命名路由
就是个路由起了个名字,使用name属性

8.路由跳转的两种方式
1.声明式导航，通过<a>标签或者<router-link>
2.编程式导航，使用this.router.push()

9.axios的特性：
1.支持promise
2.能够拦截请求和响应
3.自动转换JSON数据

10.get请求传递参数:
delete请求传递参数跟get是一样的

通过系统的url以？的形式传递参数

axios.get('http://localhost:3000/axios?id=123').then(function(ret){
      console.log(ret.data)
    })

restful 形式传递参数

 axios.get('http://localhost:3000/axios/123').then(function(ret){
      console.log(ret.data)
    })

通过params形式传递参数（可以传递多个）

axios.get('http://localhost:3000/axios', {
      params: {
        id: 789
      }
    }).then(function(ret){
      console.log(ret.data)
    })

11.axios的post请求：（传递的是json格式的数据）

直接传递对象

 axios.post('http://localhost:3000/axios', {
      uname: 'lisi',
      pwd: 123
    }).then(function(ret){
      console.log(ret.data)
    })

通过URLSearchParams

  var params = new  URLSearchParams();
    params.append('uname', 'zhangsan');
    params.append('pwd', '111');
    axios.post('http://localhost:3000/axios', params).then(function(ret){
      console.log(ret.data)
    })

12.axios的全局配置:

配置地址
axios.defaults.baseURL = ‘https://api.example.com’;

配置超时时间
axios.defaults.timeout= ‘https://api.example.com’;

配置公共请求头
axios.defaults.headers.common[‘Authorization’] = AUTH_TOKEN;

配置公共的 post 的 Content-Type
axios.defaults.headers.post[‘Content-Type’] = ‘application/x-www-form-urlencoded’;

13.axios拦截器：
拦截器分为请求拦截器和响应拦截器。请求拦截器是在发送axios请求直接会做一些处理。响应拦截器是在接收到响应数据之后做一下处理

1.请求拦截器

axios.interceptors.request.use(function(config) {
console.log(config.url)
# 1.1 任何请求都会经过这一步在发送请求之前做些什么
config.headers.mytoken = ‘nihao’;
# 1.2 这里一定要return 否则配置不成功
return config;
}, function(err){
#1.3 对请求错误做点什么
console.log(err)
})

2.响应拦截器