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

可以使用吸气剂，但是，您需要确保同时导入两个组件：

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;
                }
            }
        },
    ]
});

在我的笔记中，我写了与上述内容有关的“无法找到相关文档”。尽管没有特别的关联，但是使用Click vs MouseClick中有关渲染功能的一些信息进行检查可能会有所帮助。我已经使用您上面的示例更改了此处讨论的内容。

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

Answer 2

我之前回答的是相同的问题，您可以看到它here。

这里是一个例子：

routes: [
    {
      path: '*',
      beforeEnter(to, from, next) {
        let components = {
          default: [A, B, C][Math.floor(Math.random() * 100) % 3],
        };
        to.matched[0].components = components;

        next();
      }
    },

...其中，A，B，C是组件，并且每次路线更改时都会随机选择它们。因此，根据您的情况，您可以根据需要更改beforeEnter逻辑并设置所需的任何组件，然后再路由到它。

Answer 3

好的，所以我找到了一种简单的方法，可以在具有vuex存储状态属性的vue路由器中使用webpack延迟加载功能；

TestBed.configureTestingModule

使用上面的代码，我的home组件将动态导入并根据我的vuex存储中的 domain 属性值使用route组件。请注意，您必须设置vuex存储并将其导入路由器中才能正常工作。

如果您将组件作为导入返回，则问题中的解决方案将奏效。

Vue.js中的条件路由

3 个答案: