在做vue3,x 项目的时候遇到如下问题:
后来经过上网查看,问题出现原因是:Vue 要求组件名应该是多单词的(multi-word),以避免与 HTML 元素冲突。还有,在 Home.vue
中使用了未定义的 router
变量。
解决方案:
将 Home.vue
和 Login.vue
的组件名改为多单词形式,例如:
-
Home.vue
改为HomePage.vue
-
Login.vue
改为LoginPage.vue
在 Home.vue
中,router
变量未定义。需要导入并使用 useRouter
钩子:
// src/views/Home.vue
<script>
import { useAuthStore } from '../stores/auth';
import { useRouter } from 'vue-router';
export default {
name: 'HomePage',
setup() {
const authStore = useAuthStore();
const router = useRouter();
const logout = () => {
authStore.logout();
router.push('/login');
};
return { logout };
}
};
</script>
经过以上方案修改后,重新启动项目,发现已经成功!!!