vue2面试题10|[2024-11-24]

问题1:vue设置代理

如果你的前端应用和后端API服务器没有运行在同一个主机上,你需要在开发环境下将API请求代理到API服务器。这个问题可以通过vue.config.js中的devServer.proxy选项来配置。

1.devServer.proxy可以是一个指向开发环境API服务器的字符串:

javascript 复制代码
module.exports = {
  devServer: {
    proxy: 'http://localhost:4000'
  }
}

2.更多的代理控制行为:

javascript 复制代码
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: '<url>',
        ws: true,
        changeOrigin: true
      },
      '/foo': {
        target: '<other_url>'
      }
    }
  }
}

问题2:vue项目打包完成之后为什么会出现空白页 ?怎么解决?

1.打包路径:

javascript 复制代码
module.exports = {
    publicPath:'./'  // 此处的路径,由具体情况决定
}

2.路由模式:

hash:#

history:没有#

前端如果自己测试项目,直接将路由模式改为hash

项目上线要求是history模式,该怎么办?

前端不需要进行处理,只需要告诉后端,前端的路由模式为history,可使用重定向。

javascript 复制代码
router/index.js
const router = new VueRouter({
    mode:"history",
    base:process.env.BASE_URL,
    routes
});

问题3:模式和环境变量

在项目中的根目录新建文件:

开发环境:.env.development

生产环境: .env.production

问题4:后端解决跨域问题

javascript 复制代码
// 在routes中的index.js
router.all('*', function(req, res, next) {
    res.header('Access-Control-Allow-Origin','*');
    res.header('Access-Control-Allow-Headers','Content-Type');
    res.header('Access-Control-Allow-Methods','*');
    res.header('Content-Type','application/json;charset=utf-8');
    next();
});

问题5:Vue路由模式

路由模式有两种:history、hash

区别:

1.表现形态不同

history: http://localhost:8080/about

hash : http://localhost:8080/#/about

2.跳转请求

(当没有找到页面--404)

history: http://localhost:8080/id ----》发送请求

hash: 不会发送请求

3.打包后前端自测要使用hash,如果使用history会出现空白页

问题6:介绍一下SPA以及SPA有什么缺点

SPA是什么? 单页面应用

缺点:

1.SEO优化不好

2.性能不是特别好

问题7:Vue路径传值

1.显式(在url上是能看到所传递的值)

http://localhost:8080/about?a=1

1.1 传

javascript 复制代码
this.$router.push({
    path:'/about',
    query:{
        a:1
    }
})

1.2 接

this.$route.query.a

2.隐式(在url上看不到传递的值)

http://localhost:8080/about

2.1 传

javascript 复制代码
this.$router.push({
    name:'About',
    params:{
        a:1
    }
})

2.2 接

this.$route.params.a

问题8:路由导航守卫有哪些

全局、路由独享、组件内

使用场景:在进入某个页面之前进行判断拦截(点击订单的时候,先要判断是否已登录,如果已登录就next,若没登录就要跳转到登录页面)

1.全局

beforeEach、beforeResolve、afterEach

2.路由独享

beforeEnter

javascript 复制代码
router.beforeEach((to, from, next) => {
    if(){
        next();
    }
    else{
        router.push('/login')
        next('/login')
    }
})

3.组件内(一般使用的少)

beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

问题9:Vue动态路由

并不是所有的项目都会用到动态路由

场景:详情页(文章、商品) ---- 多个信息共用一个页面

path:"/list/:id"

router.js配置

javascript 复制代码
{
    path:"/list",
    name:"List",
    children:[
        {
            path:'/list/:id',
            name:'Details',
            component: () => import("../views/Details.vue")
        }
    ],
    component: () => import("../views/List.vue")
}
相关推荐
zwjapple3 小时前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
像风一样自由20205 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem6 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊6 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术6 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
幽络源小助理6 小时前
SpringBoot基于Mysql的商业辅助决策系统设计与实现
java·vue.js·spring boot·后端·mysql·spring
GISer_Jing6 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止6 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall6 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴6 小时前
简单入门Python装饰器
前端·python