Vue Router 切换渲染组件答案

【问题标题】：Vue Router switch rendered ComponentVue Router 切换渲染组件
【发布时间】：2022-01-04 13:19:06
【问题描述】：

在我的 Vue 应用程序中，我想包含一个未经授权的页面。因此我开始操纵我的路由器。它看起来像这样：

const router = new VueRouter({
    routes: [
        addGuard(<RouteConfigurationView>{
            path: "/somePath/:id",
            name: "someName",
            component: () => import("../pages/MyComponent.vue"),
            hidden: true
        })
     ]
});

function addGuard(route: RouteConfigSingleView): RouteConfigSingleView {
    route.beforeEnter = (to, from, next) => {
        if(to.params.id == 5) { // Just for example.
            route.component = () => import("../pages/Unauthorized.vue");
        }
        next();
    };
    return route;
}

当我输入给定的路由时，原始组件（MyComponent）正在加载，我的切换被忽略。有什么方法可以使用 Vue 工具实现我的用例？

【问题讨论】：

您所做的将不起作用，因为您不应该在创建路由器后更改路由定义。与每条路由关联的组件是固定的，不应更改。

标签： typescript vue.js vue-router

【解决方案1】：

您应该创建 UnauthorizedRoute 并为其分配 Unauthorized.vue 组件，而不是更改路由的组件。

然后，您应该将用户重定向到该路由，而不是重新分配当前路由中的组件：

next({name: 'UnauthorizedRoute'})

【讨论】：

但是像“myapp.com/somepath/unauthorized”这样的路由不是不好的做法吗？
这样的路线可能会产生误导。我建议给它一个路径，例如403 或401，或者如果您需要的话，只需重定向到登录页面。通常用户应该知道发生了什么。根据您想要休闲的模式，您可以重定向到 404 页面。这里没有不好的答案。