vue项目中知识点整理
1、vue怎么找到入口页面的?
在Vue项目中,入口页面(即根组件)是通过配置文件指定的。在创建Vue项目时,Vue CLI会自动生成一个src目录,并在其中创建一个名为main.js的文件。这个main.js文件就是Vue项目的入口文件。
在main.js文件中,你会看到以下代码:
import Vue from 'vue'
import App from './App.vue'
new Vue({
render: h =>h(App),
}).$mount('#app')
其中,App是引入的根组件(通常是一个名为App.vue的文件)。在new Vue()中,使用了render函数,将根组件渲染到Vue实例中。所以,在Vue项目中,通过修改 main.js中的代码,你可以更改默认的根组件,或者根据你的需求添加其他逻辑。值得注意的是,在开发过程中,你可能会在src目录中创建多个组件,并通过在根组件中引入和使用这些组件而构建整个应用程序。
2、vue项目请求接口的时候做了什么?
axios拦截器
请求拦截器(axios.interceptors.request.use)请求拦截器会在每个请求发送之前执行。你可以通过请求拦截器做以下操作:
>>修改请求配置。例如,添加请求头、动态设置请求URL、修改请求参数等。
>>检查请求权限。例如,检查用户是否登录,如果没有登录,重定向到登录页。
>>添加loading状态。例如,在请求开始时显示loading效果,请求结束时隐藏loading效果。
响应了拦截器(axios.interceptors.response.use)响应拦截器会在每个请求的响应返回后执行。你可以通过响应拦截器做以下操作:
>>统一处理响应数据。例如,对返回的数据进行格式化、校验、解密等处理。
>>错误处理。例如,根据不同的响应状态码进行不同的错误处理,统一提示错误信息。
>>统一处理loading状态。例如,请求成功时隐藏loading效果,请求失败时隐藏loading效果并提示错误信息。
通过使用请求拦截器和响应拦截器,你可以在Axios中实现全局的请求和响应处理逻辑,提高代码的复用性和可维护性,并且可以针对不同场景进行灵活的配置和扩展。
3、vue路由怎么界定权限的?
router.beforeEach()一般用来做一些进入页面的限制。比如没有登录,就不能进入某些页面,只有登录了之后才有权限查看某些页面,即路由拦截。
具体实现思路:首先,判断是否登录,若登录(判断是否在登录页面,若在,跳转首页。若不在,先获取当前登录的路由权限,若在权限之内,直接跳转,若不在权限之内,跳转到404页面。)若未登录(判断是否是不需要登录的白名单页面,若是,直接跳转该页面,若不是,直接跳转登录页面。)