vue3学习笔记以及遇到的问题（一）

1、template中无法设置点击事件

<el-input v-model="code">
        <template #suffix class="loginCode">
        	<div @click="sendCode()">发送验证码</div >
        </template>
</el-input>

2、defineExpose语法糖使用可以直接释放语法糖内的方法，父组件可以直接调用

//子组件

defineExpose({
  setPopupStatus() {	//父组件调用方法
    popupStatus.value = true;  //子组件逻辑
  },
});

//父组件

<div ref='positionPopup'></div>
<button @click="popup"></button>

const positionPopup = ref(null);
function popup() {
  positionPopup.value.setPopupStatus()
}

3、vue3 本地引入图片

new URL('@/assets/xxx/xxx.webp',import.meta.url).href

4、store.ts 配置

import { defineStore } from 'pinia';
import { store } from '@/store';

interface envBodyState {
  popupStatus: string;
}
export const useEnvBodyStore = defineStore({
  id: 'envBody',
  state: (): envBodyState => ({
    popupStatus: '',
  }),
  getters: {
    getPopupStatus(state) {	//获取vuex参数
      return state.popupStatus;
    },
  },
  actions: {
    setPopupStatus(value: string) {  //赋值vuex参数
      this.popupStatus = value;
    },
  },
});

export function useEnvBodyStoreWithOut() {
  return useEnvBodyStore(store);
}

5、router 配置

//index.js
import { createRouter, createWebHashHistory } from 'vue-router';
import { useUserStoreWithOut } from '@/store/modules/user.ts';		//vuex保存用户信息
import envBodyRoutes from './modules/envBody.route.js';

const router = createRouter({
  history: createWebHashHistory(import.meta.env.BASE_URL),
  routes: [
    envBodyRoutes,
    {
      path: '/',
      name: 'home',
      redirect: '/index',
    },
    {
      path: '/index',
      name: 'index',
      component: () => import('@/views/index/index.vue'),
    },
    {
      path: '/login',
      name: 'login',
      component: () => import('@/views/user/login/index.vue'),
    },

   
  ],
});

//路由守卫
router.beforeEach((to, from, next) => {
  const userStore = useUserStoreWithOut();
  // 如果用户没有登录，并且目标路由没有设置 isAuth 字段或者 isAuth 字段为 false，则允许用户直接访问目标路由
  if (
    !userStore.getUserInfo?.access_token &&
    (to.meta.isAuth === undefined || to.meta.isAuth === false)
  ) {
    next();
  } else if (!userStore.getUserInfo?.access_token && to.meta.isAuth === true) {
    // 如果用户没有登录，并且目标路由设置了 isAuth 字段为 true，则将用户重定向到登录页面
    next({ name: 'index' });
  } else {
    // 如果用户已登录，允许用户访问目标路由
    next();
  }
});
export default router;

//envBodyRoutes.js
const envBodyRoutes = {
  path: '/envBody',
  redirect: '/envBody/index',
  children: [
    {
      path: 'index',
      name: 'EnvBody',
      component: () => import('@/views/envBody/index/index.vue'),
    },
    {
      path: 'resources',
      name: 'resources',
      component: () => import('@/views/envBody/resources/index.vue'),
    },
    {
      path: 'indexTest',
      name: 'indexTest',
      component: () => import('@/views/envBody/resources/indexTest.vue'),
    },
  ],
};
export default envBodyRoutes;