在加载 vuejs 组件之前指定条件

Question

我是 vuejs 新手，想在组件加载前做个检查，但不知道怎么做。

我想要做的是如果"this.$store.getters.user.id" 和"this.$route.params.id" 在组件加载之前不相等 "this.$router.push({name: 'home', params: {id" : this.$store.getters.user.id}})"

{
        path: '/:id',
        name: 'home',
        component: () => import('../Views/Admin/Home.vue'),
        meta: {
            guard: 'auth'
        },
        children: [
            {
                path: 'admin',
                component: () => import('../Views/Admin/HomeProfile.vue'),
                name: 'admin',
                meta: {
                    guard: 'auth'
                },
            }
        ]
    },
router.beforeEach((to, from, next) => {

    if (store.getters.user) {
        if (to.matched.some(route => route.meta.guard === 'guest')) next({name: 'home'})
        else next();

    } else {
        if (to.matched.some(route => route.meta.guard === 'auth')) next({name: 'login'})
        else next();
    }
})

Answer 1

如果您需要在应用程序中的每个路由之前运行此函数，您可以使用路由器的beforeEach 函数来检查。

router.beforeEach((to, from, next) => { }.

如果这仅适用于一个或一些路由，您可以将属性 beforeEnter 设置为路由。 https://router.vuejs.org/guide/advanced/navigation-guards.html#per-route-guard

---

在你的 beforeEach 函数中，你需要进行你所说的验证。

if(this.$store.getters.user.id !== to.params.id) 
   next({
          name: 'home', 
          params: { id: this.$store.getters.user.id }
   });