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")
}
相关推荐
恋猫de小郭1 小时前
Flutter Widget IDE 预览新进展,开始推进落地发布
android·前端·flutter
jingling5552 小时前
【Vue3 实战】插槽封装与懒加载
前端·javascript·vue.js
武昌库里写JAVA3 小时前
39.剖析无处不在的数据结构
java·vue.js·spring boot·课程设计·宠物管理
Freedom风间7 小时前
前端优秀编码技巧
前端·javascript·代码规范
萌萌哒草头将军7 小时前
🚀🚀🚀 Openapi:全栈开发神器,0代码写后端!
前端·javascript·next.js
萌萌哒草头将军8 小时前
🚀🚀🚀 Prisma 爱之初体验:一款非常棒的 ORM 工具库
前端·javascript·orm
拉不动的猪8 小时前
SDK与API简单对比
前端·javascript·面试
runnerdancer8 小时前
微信小程序蓝牙通信开发之分包传输通信协议开发
前端
BillKu8 小时前
Vue3后代组件多祖先通讯设计方案
开发语言·javascript·ecmascript
山海上的风8 小时前
Vue里面elementUi-aside 和el-main不垂直排列
前端·vue.js·elementui