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

问题1：vue设置代理

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

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

module.exports = {
  devServer: {
    proxy: 'http://localhost:4000'
  }
}

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

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

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

1.打包路径：

module.exports = {
    publicPath:'./'  // 此处的路径，由具体情况决定
}

2.路由模式：

hash：#

history：没有#

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

项目上线要求是history模式，该怎么办？

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

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

问题3：模式和环境变量

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

开发环境：.env.development

生产环境： .env.production

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

// 在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 传

this.$router.push({
    path:'/about',
    query:{
        a:1
    }
})

1.2 接

this.$route.query.a

2.隐式（在url上看不到传递的值）

http://localhost:8080/about

2.1 传

this.$router.push({
    name:'About',
    params:{
        a:1
    }
})

2.2 接

this.$route.params.a

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

全局、路由独享、组件内

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

1.全局

beforeEach、beforeResolve、afterEach

2.路由独享

beforeEnter

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

3.组件内（一般使用的少）

beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

问题9：Vue动态路由

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

场景：详情页（文章、商品） ---- 多个信息共用一个页面

path:"/list/:id"

router.js配置

{
    path:"/list",
    name:"List",
    children:[
        {
            path:'/list/:id',
            name:'Details',
            component: () => import("../views/Details.vue")
        }
    ],
    component: () => import("../views/List.vue")
}