Vue.js 中的条件路由

Question

我有两个不同的视图，我想根据令牌是否在 LocalStorage 中来显示相同​​的路径。我可以将逻辑直接移到视图本身中，但我很想知道路由器中是否有实现它的方法。

就像是：

export default new Router({
  mode: "history",
  base: process.env.BASE_URL,
  routes: [
    {
      path: "/",
      name: "home",
      component: function() {
        if (...) {
          return ViewA
        } else {
          return ViewB
        }
      }
    },
  ]
});

我试过上面的代码，但没有用。该应用程序构建良好，但没有显示两个视图。

Answer 1

可以为此使用 getter，但是，您需要确保导入这两个组件：

import ViewA from '@/views/ViewA'
import ViewB from '@/views/ViewB'

export default new Router({
    mode: "history",
    base: process.env.BASE_URL,
    routes: [
        {
            path: "/",
            name: "home",
            get component() {
                if (...) {
                    return ViewA;
                } else {
                    return ViewB;
                }
            }
        },
    ]
});

在我的笔记中，我写了与上述内容有关的“无法找到有关此的文档”。然而，虽然没有特别相关，但使用/sf/answers/3509614811/ 中有关渲染功能的一些信息进行审查可能会有所帮助。我已经使用上面的示例更改了那里讨论的内容。

component: {
    render(c) {
        if (...) {
            return c(ViewA);
        } else {
            return c(ViewB);
        }
    }
}