12.17面试题

目录

讲下路由拦截器

缓存路由

uniapp页面跳多个页面返回根页面会有什么问题

vue动态路由跳转

uiapp有哪些跳转方式

前端团队有多少人？你在里面的定位？

[uniapp IOS和安卓打包上架](#uniapp IOS和安卓打包上架)

[pinia是怎么存数据的 一般都存的什么数据](#pinia是怎么存数据的 一般都存的什么数据)

接口如何封装的

---

讲下路由拦截器

beforeEach前置路由守卫和afterEach后置路由守卫

// 全局路由守卫
 
//前置路由守卫  初始化时被调用 每次路由切换之前被调用
// to  去哪儿 from 来自哪里 next 放行
router.beforeEach((to, from, next) => {
  if (!token && !to.query.token) {
    if (to.path == '/login') {
      next();
    } else {
      next('/login');
    }
  } else {
    next();
  }
});
 
 
// 后置路由守卫 初始化时被调用 每次路由切换之后被调用
router.afterEach((to, from, next) => {});

          {
            path: '/news',
            name: 'News',
            meta: {
              isAuth: true
            },
            component: () => import('../views/news/news.vue'),
 
            // 独享路由守卫  只针对单个路由进行限制  只有前置 没有后置
            beforeEnter: (to, from, next) => {
              const token = localStorage.getItem('token');
              if (to.meta.isAuth) {
                if (!token && !to.query.token) {
                   if (to.path == '/login') {
                    next();
                  } else {
                    next('/login');
                  }
                } else {
                  next();
                }
              }
            }
 
          }

组件内使用
 
//进入守卫 通过路由桂策 进入该组件时被调用
beforeRouteEnter(to,from,next){ }
 
//离开守卫 通过路由规则 离开该组件时被调用
beforeRouteLeave(to,from,next){ }

缓存路由

方法1：使用<keep-alive>

作用：让不展示的路由组件保持挂载 不被销毁

如：组件中的Input输入后 切换别的组件 回来输入的值还在

const router = new VueRouter({
  routes: [
    {
      path: '/home',
      component: () => import('./components/Home.vue')
    },
    {
      path: '/profile',
      component: () => import('./components/Profile.vue')
    }
  ]
})

然后在你的App.vue或者相应的父组件中使用<keep-alive>来缓存这些组件

<template>
  <keep-alive>
    <router-view></router-view>
  </keep-alive>
</template>

方法2：使用meta字段和动态<keep-alive>

如果你想要更细粒度地控制哪些路由需要被缓存，你可以在路由配置中使用meta字段，并在父组件中根据路由的meta信息决定是否使用<keep-alive>

修改路由配置，添加meta字段：

const router = new VueRouter({
  routes: [
    {
      path: '/home',
      component: Home,
      meta: { keepAlive: true } // 标记此路由需要被缓存
    },
    {
      path: '/profile',
      component: Profile,
      meta: { keepAlive: false } // 标记此路由不需要被缓存
    }
  ]
})

然后在父组件中动态使用<keep-alive>：

<template>
  <keep-alive v-if="$route.meta.keepAlive">
    <router-view></router-view>
  </keep-alive>
  <router-view v-else></router-view>
</template>

uniapp页面跳多个页面返回根页面会有什么问题

vue动态路由跳转

在 Vue 中实现动态路由跳转，主要依赖于 Vue Router 组件的 <router-link> 标签或 this.$router.push() 方法。

uiapp有哪些跳转方式

• uni.navigateTo 保留当前页面
• uni.redirtectTo 瑞得ruai可特 关闭当前页面
• uni.relaunch 关闭所有页面
• uni.switchTab 套转到tabtar页面 并关闭所有非tabtar页面
• uni.navigateback 关闭当前页面 返回上一页面或多级页面

前端团队有多少人？你在里面的定位？

uniapp IOS和安卓打包上架

pinia是怎么存数据的 一般都存的什么数据

接口如何封装的

以我负责的微信小程序项目为例，其中包含了loading统一处理，请求拦截器，响应拦截器，错误处理，接口超时的时间等

首先定义基础配置 其中包含url，timeout，loading，loadingText，showErrorToast等

然后用new promise包裹wx.request,接收参数 URL,method,data,hearder等参数，合并默认配置和自定义配置

添加请求拦截器 请求拦截中hearder头中添加缓存token 判断token是否存在 不存在跳转登录页 存在存到header头中 或者是请求拦截器中header头中添加app版本号或者设备号

添加响应拦截器 先统一解析数据 成功返回核心数据 失败则统一处理（如 401 自动刷新 token 并重试请求或者跳转到登录页，500服务器错误，其他错误提示用户）

注意事项：

loading控制：请求成功或失败之后记得关闭loading 避免忘记关闭页面卡死