Vue.js App Element 更新数据

Question

我试图在App.vue 中有一个模板，这是我的应用程序的主要组件，它包含导航栏。但是我想在登录页面时隐藏这个栏，但我不能强制App.vue 更新。请问有什么帮助吗？ :)

App.vue - 如果我应该显示工具栏并且我想在模板中使用它，我想要一个标志。主要问题是 currentRoute.path 不会自动更新。我也尝试添加router.afterEach，但没有成功。

<script>
  export default {
    name: 'app',
    data() {
      return {
        msg: 'initial',
        showToolbar: router.currentRoute.path !== '/login'
      }
    },
  }
</script>

main.js

firebase.auth().onAuthStateChanged(function (user) {
  if (!app) {
    /* eslint-disable no-new */
    app = new Vue({
      el: '#app',
      router,
      components: {App},
      template: '<App/>',

    })
  }
});

路由器/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '@/components/Home'
import Login from '@/components/Login'
import VueMaterial from 'vue-material'
import 'vue-material/dist/vue-material.css'

Vue.use(VueMaterial);
Vue.use(VueRouter);

let router = new VueRouter({
  routes: [
    {
      path: '*',
      redirect: '/'
    },
    {
      path: '/login',
      name: 'Login',
      component: Login
    },
    {
      path: '/',
      name: 'Home',
      component: Home,
      meta: {
        requiresAuth: true
      }
    }
  ]
});

export default router;

Answer 1

您当前正在设置showToolbar 的初始值，但未将其设置为观察路线变化。为此，请将showToolbar 移动到您的computed 部分App.vue vm：

export default {
  name: 'app',
  data() {
    return {
      msg: 'initial',
    }
  },
  computed: {
    showToolbar() { return this.$router.currentRoute.path !== '/login' }
  }
}

此外，由于您没有在 App.vue 中显式导入路由器，因此您可以像 this.$router 一样在 App.vue vm 中访问它，而不是像 router 那样访问它。