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")
}
相关推荐
范文杰2 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪2 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪2 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy3 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom4 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom4 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom4 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom4 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom4 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试
LaoZhangAI5 小时前
2025最全GPT-4o图像生成API指南:官方接口配置+15个实用提示词【保姆级教程】
前端