Question

我正在做一个小型CRM的项目。在登录表单中，我有一个在电子邮件或密码不正确时显示警报消息的组件。当某人尝试错误登录时，输入正确的信息然后注销，除非刷新页面，否则消息仍会出现。

我试图通过访问watch来解决$route中的问题，因此每次更改路由时，都会清除消息的状态。 Alert.vue：

<template>
 <div :class="'alert ' + alert.type">{{alert.message}}</div>
</template>

<script>
import { mapState, mapActions } from 'vuex';

export default {
 computed: mapState({
        alert: state => state.alert
    }),
methods: mapActions({
        clearAlert: 'alert/clear' 
    }),
    watch: {
        $route (to, from){
            console.log('inside $rout');
            this.clearAlert();
        }
    }

};
</script>

main.js：

import Vue from 'vue';

import { store } from './_store';
import { router } from './_helpers';
import App from './components/App';
import './css/main.css';

new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
});

router.js：

import Vue from 'vue';
import Router from 'vue-router';

import Dashboard from '../components/Dashboard.vue';
import LoginPage from '../components/LoginPage.vue';
import UserPage from '../components/UserPage.vue';

Vue.use(Router);

export const router = new Router({
  mode: 'history',
  routes: [
    { path: '/app', component: Dashboard },
    { path: '/login', component: LoginPage },
    { path: '/app/user-info', component: UserPage },

    { path: '*', redirect: '/app' }
 ]
});

 router.beforeEach((to, from, next) => {
 const allowedPages = ['/login'];
 const authRequired = !allowedPages.includes(to.path);
 const loggedIn = localStorage.getItem('user');

 if (authRequired && !loggedIn) {
   return next('/login');
 }

 next();
})

我尝试同时使用文档https://router.vuejs.org/guide/essentials/dynamic-matching.html

中的两种方法

由于某种原因，$route无法识别，并且我无法访问它。我还应该提到，在main.js中，我导入了router.js文件，该文件从Router导入了'vue-router'并实例化了它，因此$route应该可以从所有组件访问。有人可以阐明为什么吗？

链接到我的项目：repo

Answer 1

您拥有的$route观察者设置是正确的，并且您的组件可以访问$route，如您将其登录到mounted()所示。

问题在于观察者位于Alert.vue中，这是页面上要远离的组件，因此它被破坏了，从而阻止了观察者被调用。如果将$route监视程序移动到始终保持活动状态的组件（例如App.vue），则会看到它可以正常工作。

观看$ route对象中的更改-Vue路由器

1 个答案: