Laravel中使用Vue Router时，点击router-link修改Vue实例show变量的方法

Hey there! Let's work through how to update that show variable in your root Vue instance when clicking the Login router link. I've got a couple of straightforward approaches for you:

方法1：使用全局路由守卫（最直接的方案） #

Since Vue Router gives us navigation guards that trigger whenever the route changes, we can use this to modify the show variable directly when navigating to the /login path.

First, set up your router and Vue instance, then add a global beforeEach guard to check the target route:

// Initialize your router
const router = new VueRouter({
  routes: [
    { path: '/login', component: Login }
    // Add your other routes here
  ]
});

// Create your root Vue instance
const app = new Vue({
  el: '#app',
  data() {
    return {
      show: true
    }
  },
  router
});

// Add the global navigation guard
router.beforeEach((to, from, next) => {
  // Check if we're heading to the login page
  if (to.path === '/login') {
    app.show = false; // Update the root instance's show variable
  } else {
    // Revert show to true when navigating away from login (adjust as needed)
    app.show = true;
  }
  next(); // Don't forget to call next() to proceed with the navigation
});

This works because we're directly accessing the root Vue instance (app) from the guard, which is simple and effective for small to medium projects.

方法2：使用事件总线（适合组件-centric通信） #

If you prefer a more decoupled approach (so your router doesn't directly reference the root instance), you can use an event bus to send a message from the Login component to the root instance when it mounts.

First, create an event bus in your main JS file:

// In resources/js/app.js or a dedicated file
const EventBus = new Vue();

Then update your root instance to listen for the event:

const app = new Vue({
  el: '#app',
  data() {
    return {
      show: true
    }
  },
  router,
  created() {
    // Listen for the 'update-show' event from the Login component
    EventBus.$on('update-show', (value) => {
      this.show = value;
    });
  }
});

Finally, modify your Login component to emit the event when it mounts:

<template>
  <div>Login component</div>
</template>

<script>
export default {
  mounted() {
    // Emit event to set show to false when the Login component loads
    EventBus.$emit('update-show', false);
  }
}
</script>

This keeps your components and router more independent, which is great if you plan on scaling up your app later.

方法3：使用Vuex（适合 larger apps） #

If your project already uses Vuex for state management (or you're planning to), this is the most scalable approach. Move the show variable to your Vuex store and update it via mutations/actions.

First, set up your Vuex store:

// resources/js/store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    show: true
  },
  mutations: {
    SET_SHOW(state, value) {
      state.show = value;
    }
  },
  actions: {
    updateShow({ commit }, value) {
      commit('SET_SHOW', value);
    }
  },
  getters: {
    currentShowState: state => state.show
  }
});

Then integrate the store into your root instance:

import store from './store';

const app = new Vue({
  el: '#app',
  router,
  store
});

Now you can update the state either via a route guard:

router.beforeEach((to, from, next) => {
  const targetValue = to.path === '/login' ? false : true;
  app.$store.dispatch('updateShow', targetValue);
  next();
});

Or directly from the Login component's mounted hook:

<template>
  <div>Login component</div>
</template>

<script>
export default {
  mounted() {
    this.$store.dispatch('updateShow', false);
  }
}
</script>

To use the show value in your root template, you'd reference it via the store getter: {{ $store.getters.currentShowState }}

内容的提问来源于stack exchange，提问作者Soheil Ghasemian