Vue踩坑: beforeRouteEnter 不执行

4,872 阅读1分钟

示例代码

export default class App extends Vue {
  beforeRouteEnter(to, from, next) {
    console.log('beforeRouteEnter');
    next();
  }
}

项目启动后 console.log('beforeRouteEnter'); 没有执行。百思不解。被人一语点破。 App.vue 组件不在路由表中

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

路由表

const routes: Array<any> = [
  {
    name: "Home",
    path: "/home",
    component: Home,
  },
  {
    name: "About",
    path: "/about",
    component: About,
  },
  {
    path: "/",
    redirect: "/about",
  },
];

只有出现在 routes 中的组件以及其子组件才是路由组件。App.vue 不在 routes 中。