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")
}
相关推荐
90后的晨仔5 分钟前
Vue3项目全面部署指南:从构建到上线
前端·vue.js
小于小于091213 分钟前
npx 与 npm 区别
前端·npm·node.js
重生之我要当java大帝16 分钟前
java微服务-尚医通-数据字典-5
vue.js·微服务·云原生·架构
望获linux31 分钟前
【实时Linux实战系列】实时 Linux 在边缘计算网关中的应用
java·linux·服务器·前端·数据库·操作系统
qq_2529241933 分钟前
PHP 8.0+ 现代Web开发实战指南 引
android·前端·php
Jeled33 分钟前
Android 本地存储方案深度解析:SharedPreferences、DataStore、MMKV 全面对比
android·前端·缓存·kotlin·android studio·android jetpack
Mintopia34 分钟前
🎨 AIGC 内容过滤技术:当创作的洪流遇上理性的堤坝
前端·javascript·aigc
Mintopia41 分钟前
⚙️ Next.js 缓存与队列:当数据与请求跳起“低延迟之舞”
前端·全栈·next.js
Shi_haoliu1 小时前
Vue2 + Office Add-in关于用vue项目于加载项控制excel单元格内容(Demo版)
前端·javascript·vue.js·node.js·html·excel·office
计算机毕业设计木哥1 小时前
计算机毕业设计选题推荐:基于SpringBoot和Vue的爱心公益网站
java·开发语言·vue.js·spring boot·后端·课程设计