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")
}
相关推荐
@大迁世界1 小时前
Vue 设计模式 实战指南
前端·javascript·vue.js·设计模式·ecmascript
芭拉拉小魔仙2 小时前
Vue项目中如何实现表格选中数据的 Excel 导出
前端·vue.js·excel
jump_jump2 小时前
妙用 localeCompare 获取汉字拼音首字母
前端·javascript·浏览器
U.2 SSD2 小时前
Echarts单轴坐标系散点图
前端·javascript·echarts
不做无法实现的梦~2 小时前
jetson刷系统之后没有浏览器--解决办法
开发语言·javascript·ecmascript
德育处主任Pro2 小时前
前端玩转大模型,DeepSeek-R1 蒸馏 Llama 模型的 Bedrock 部署
前端·llama
Jedi Hongbin3 小时前
Three.js NodeMaterial 节点材质系统文档
前端·javascript·three.js·nodematerial
前端小马3 小时前
前后端Long类型ID精度丢失问题
java·前端·javascript·后端
用户1456775610373 小时前
干净的图片批量处理,处理速度飞快
前端
用户1456775610374 小时前
亲测好用!简单实用的图片尺寸调整工具
前端