После добавления Global Route Guards в Vue Router URL больше не будет обновляться - PullRequest
Новая
       28

После добавления Global Route Guards в Vue Router URL больше не будет обновляться

1 голос
/ 21 марта 2020

Я проходил курсы VueMastery и наткнулся на неожиданную проблему, которую, похоже, не могу решить сам.

Без использования Global Router Guards URL-адреса обновляются нормально в обоих режимах. Но как только я добавляю следующие перехватчики к моему маршрутизатору (router / index. js), я не получаю никаких ошибок, но URL больше не будет обновляться: 

router.beforeEach((routeTo, routeFrom, next) => {
  NProgress.start();
  next();
});

router.afterEach((routeTo, routeFrom, next) => {
  NProgress.done();
  next();
});

Использование:

  • @ vue / cli 4.2.3
  • vue -router 3.1.5

Файл моего полного маршрутизатора (router / index. js) содержит следующий скрипт: 

import Vue from "vue";
import VueRouter from "vue-router";
import EventList from "../views/EventList.vue";
import store from "@/store/index";
import NProgress from "nprogress";

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    name: "event-list",
    component: EventList
  },
  {
    path: "/event/create",
    name: "event-create",
    component: () =>
      import(/* webpackChunkName: "event-create" */ "../views/EventCreate.vue")
  },
  {
    path: "/event/:id",
    name: "event-show",
    component: () =>
      import(/* webpackChunkName: "event-show" */ "../views/EventShow"),
    props: true,
    beforeEnter(routeTo, routeFrom, next) {
      store.dispatch("event/fetchEvent", routeTo.params.id).then(event => {
        routeTo.params.event = event;
        next();
      });
    }
  }
];

const router = new VueRouter({
  mode: "history",
  routes
});

router.beforeEach((routeTo, routeFrom, next) => {
  NProgress.start();
  next();
});

router.afterEach((routeTo, routeFrom, next) => {
  NProgress.done();
  next();
});

export default router;

И импортируется и используется в моей главной. js: 

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";

// Automatic Global Component Registraton
import upperFirst from "lodash/upperFirst";
import camelCase from "lodash/camelCase";

// NProgress
import "nprogress/nprogress.css";

const requireComponent = require.context(
  // The relative path of the components folder
  "./components",
  // Whether or not to look in subfolders
  false,
  // The regular expression used to match base component filenames
  /Base[A-Z]\w+\.(vue|js)$/
);

requireComponent.keys().forEach(fileName => {
  // Get component config
  const componentConfig = requireComponent(fileName);

  // Get PascalCase name of component
  const componentName = upperFirst(
    camelCase(
      // Gets the file name regardless of folder depth
      fileName
        .split("/")
        .pop()
        .replace(/\.\w+$/, "")
    )
  );

  // Register component globally
  Vue.component(
    componentName,
    // Look for the component options on `.default`, which will
    // exist if the component was exported with `export default`,
    // otherwise fall back to module's root.
    componentConfig.default || componentConfig
  );
});

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");

Что может привести к тому, что URL больше не будет обновляться? Я попытался использовать режим ha sh по умолчанию, но возникла та же проблема. URL просто не будет обновляться при переходе по ссылкам роутера.

1 Ответ

2 голосов
/ 21 марта 2020

Должна быть ошибка, сообщающая, что

TypeError: next не является функцией

, поскольку next не определено в afterEach, поскольку это конец цепочки промежуточного программного обеспечения маршрутизации. Если вы удалите next из afterEach, он должен снова работать: 

router.afterEach((routeTo, routeFrom) => {
  NProgress.done();
});

Вот ссылка на документы

...