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")
}