VueJS & TS：在特定页面上隐藏组件时出错答案

【问题标题】：VueJS & TS : Error on hiding a component on specific pageVueJS & TS：在特定页面上隐藏组件时出错
【发布时间】：2021-04-29 09:00:12
【问题描述】：

我有一个 VueJS 项目，我想在登录页面上隐藏一个组件（导航抽屉）。它工作正常，但我有一个错误，我无法构建我的应用程序。

顺便说一下，我用的是vue路由器。

我的组件分为 3 个文件（.vue、.html、.ts）

他是我的 .ts 文件，但出现错误：

有人知道我怎样才能在登录页面上隐藏我的组件而不会出现错误，以便我可以构建我的应用程序吗？

谢谢！

这是我的 NavigationDrawer.ts 文件：

import Vue from 'vue'
export default Vue.extend({
    name: "NavigationDrawer",
    data: () => ({
        items: [
            { title: 'Accueil', icon: 'mdi-home-city', link: '/index' },
            { title: 'Magasins', icon: 'mdi-file-table-box-outline', link: '/magasins' },
            { title: 'Page 2', icon: 'mdi-file-table-box-multiple-outline', link: '/page2' },
            { title: 'Paramètres', icon: 'mdi-cog-outline', link: '/settings' },
        ],
    }),
    computed: {
        isLogin() {
            return !['Login'].includes(this.$route.name)
        }
    }
})

安东尼

【问题讨论】：

标签： typescript vue.js vue-router

【解决方案1】：

不是 100% 确定，因为我使用 vuex 存储用户登录信息，然后在 App.vue 中的特定组件上使用简单的 v-if 来根据需要显示或隐藏组件。这也是在带有 beforeEach 钩子的 vue-router 的 index.js 文件的上下文中。话虽如此，计算属性被缓存，因此当 this.$route.name 在构建时“未定义”时，您的 isLogin 计算属性似乎正在返回错误。我相信以下内容可能会奏效。

`isLogin() {
 return this.$route.name != "undefined" 
      ? !['Login'].includes(this.$route.name)
      : false (or true depending on your desire)

同样，不是 100% 确定，因为我不完全了解您使用的方法。无论哪种方式，如果不是这样，希望其他人可以提供解决方案。

【讨论】：