No2.11 前端面试题 1. axios 2. vue路由如何传参 3. vue路由的`hash`模式和`history`模式有什么区别 4. 如何解决刷新后二次加载路由

1. axios

1. axios时目前最流行的ajax封装库之一，用于很方便地实现ajax请求的发送。
2. axios如何做封装

// axios封装
			// 1. 引入axios
			import axios from 'axios'
			// 2. 创建实例
			const api=axios.create({
				baseUrl:'',//请求地址的公共部分
				timeout:3000,//请求的超时时间
				//...
			})
			// 3. axios请求拦截器
			api.interceptors.request.use(config=>{
				// config请求的信息
				return config
			},err=>{
				//抛出错误
				Promise.reject((err))
			})
			// 4. axios响应拦截器
			api.interceptors.response.use(res=>{
				console.log(res);
				return Promise.resolve((res))
			},err=>{
				//抛出错误
				Promise.reject((err))
			})
			// 5. 把api返回出去
			export default api

3. 接口封装及使用

//接口封装
			// 1. 引入上面封装好的axios.js
			import api from "axios.js"
			// 2. 创建接口
			export const login=()=>api({
				url:'',//请求地址
				method:'',//请求方法
				params:params//请求参数
			})
			// 3. .vue里使用封装好的接口
			// 3.1 引入接口
			 import { login } from "request.js"//此处request.js即上面封装的接口
			// 3.2 方法调用
			 method:{
				 login().then(res=>{
					 console.log(res);
				 })
			 }

2. vue路由如何传参

1. params传参

this.$router.push({name:'index',params:{id:item.id}})
this.$route.params.id

2. 路由属性传参

this.$router.push({name:'/index/$(item.id)'})
{path:'/index:id'}//路由配置

3. query传参(可以解决页面刷新参数丢失的问题)

this.$router.push({
	name:'index',
	query:{id:item.id}
})

3. vue路由的hash模式和history模式有什么区别

1. hash的路由地址有’#',history没有
2. 在做回车刷新时,hash会加载对应页面,history会报错404
3. hash支持低版本浏览器,history因为是H5新增,所以不支持
4. hash不会重新加载页面,单页面应用必备
5. history有历史记录,H5新增pushState和replaceState()去修改历史记录,不会立刻发送请求
6. history需要后台配置

4. 如何解决刷新后二次加载路由

1. window.location.reload()//可能会出现闪屏的问题
2. matcher

const router=createRouter()
export function resetRouter(){
	const newRouter=creatRouter
	router.maycher=newRouter.matcher
}

匹配搭配的路由形成可访问的路由