代码之家 › 专栏 › 技术社区 › Matt

难以重定向到404页

vue-router vue.js javascript

Matt · 技术社区 · 5 年前

$router.push 按到404页,如下所示:

component.vue

async created() {
    const userExists = await this.$store.dispatch("user/creatorExists", {
        userId: this.$route.params.userId
    });
    if (!userExists) {
        this.$router.push({ name: "pageNotFound" });
    }

问题是在呼叫检查用户是否存在的过程中, 组件.vue 将完全加载,因此最终用户将在重定向之前看到屏幕上的初始组件闪烁。

2 回复 | 直到 5 年前

Phil 5 年前

使用 beforeRouteEnter in-component navigation guard

import store from "wherever/your/store/lives"

export default {
  name: "UserProfile",
  async beforeRouteEnter (to, from, next) {
    const userExists = await store.dispatch("user/creatorExists", {
        userId: to.params.userId
    });
    if (!userExists) {
        return next({ name: "pageNotFound" });
    }
    next()
  },
  // data, computed, methods, etc
}

另请参见 Data Fetching - Fetching Before Navigation

this 在 在例行检查之前 所以你需要导入 store 从任何定义它的地方。

sugars 5 年前

我的建议是你应该在 global before guards router.beforeEach

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
 // Check each time before entering the page or a specific page  
})

推荐文章

Jimmy Kiarie · 路由之前的Vue js

8 年前

angelique000 · 对于非常大的Web应用程序,Vue路由器的最佳实践是什么?

8 年前

Felipe Paulo · Vuejs未渲染子路由

8 年前

angelique000 · 如何在Vue组件中加载OpenSeadragon组件

8 年前

dsky · 保持Vue状态

8 年前

Paul Renshaw · Vue。Firebase托管上的js SPA,使用通配符重写Firebase云函数

8 年前

josefdev · 如何在Vue中声明被动属性。js公司

8 年前

ChadQi · 刷新浏览器导致文件路径更改

8 年前

DarkFenix · 访问存储或获取程序的状态_WEBPACK\u IMPORTED\u MODULE\u 3\u store\uuuuuuuuuuuu。a、调度不是一项功能

8 年前

Chad Carter · Vue测试UTIL未知自定义元素:<路由器链接>

8 年前