我一直在关注 VueMastery 类(class),并偶然发现了一个我自己似乎无法解决的意外问题。
如果不使用全局路由器防护,URL 在两种模式下都会正常更新。但是,一旦我将以下 Hook 添加到我的路由器 (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;
并在我的 main.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 不再更新?我尝试使用默认的哈希模式,但出现了同样的问题。单击路由器链接时,URL 不会更新。
最佳答案
应该有一个错误告诉你
TypeError: next is not a function
因为 next
没有在 afterEach
中定义,因为那是路由中间件链的末尾。如果您从 afterEach
中删除 next
,它应该会再次工作:
router.afterEach((routeTo, routeFrom) => {
NProgress.done();
});
关于javascript - 在 Vue Router 中添加 Global Route Guards 后,URL 将不再更新,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60781783/