Vue 2 - 路由器值 this.$route 有错误 - 创建组件时为空值答案

【问题标题】：Vue 2 - Router value, this.$route, has wrong - empty value when component is createdVue 2 - 路由器值 this.$route 有错误 - 创建组件时为空值
【发布时间】：2021-08-07 20:19:39
【问题描述】：

在 App.vue 主组件中，我基于 this.$route 路径显示组件。

模板

<topbar v-if="!isLoginPage" />

计算

  get isLoginPage() {
    return this.$route.path === "/login";
  }

我遇到的问题是 App.vue 组件总是用空值初始化

所以在登录页面中，topbar 组件被创建，一秒钟后，当路由器将其值更改为正确的路径“/login”时，它被销毁。

如何获得结果，当在“/login route”上创建组件时，我会立即在 v-if 语句中获得正确的值？

【问题讨论】：

标签： javascript vue.js vuejs2

【解决方案1】：

这不起作用，因为this.$route 是响应式的，并且您在顶级App.vue 组件中有一个基于其值的条件。最好为登录页面创建一个单独的视图组件来渲染topbar组件

LoginView.vue

<template>
  <div>
    <topbar/>
  </div>
</template>

App.vue

<template>
  <div id="app">
    <router-view />
  </div>
</template>

路由器/index.js

const routes = [
  ...
  { path: '/login', component: '<path-to-login-view>' } 
]

【讨论】：