Vue.js 中的条件路由答案

【问题标题】：Conditional route in Vue.jsVue.js 中的条件路由
【发布时间】：2019-05-03 20:59:35
【问题描述】：

根据令牌是否在 LocalStorage 中，我想针对同一路径显示两个不同的视图。我可以将逻辑直接移动到视图本身，但我很想知道路由器中是否有办法。

类似：

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

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

【问题讨论】：

标签： javascript vue.js single-page-application vue-router

【解决方案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;
                }
            }
        },
    ]
});

在我的笔记中，我写了与上述有关的“找不到关于此的文档”。然而，虽然没有特别相关，但使用来自https://stackoverflow.com/a/50137354/3261560 的有关渲染功能的一些信息可能会有所帮助。我已经使用上面的示例更改了那里讨论的内容。

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

【讨论】：

如果我错了，请纠正我，但 components 不能是函数/数组等 - 只有 object。如果components can 是函数 - 你能提供一个文档链接吗？如果这是真的，它也会对我有很大帮助。
我已经用一些可能有用的附加信息更新了我的答案。我的笔记说“找不到文档”。但是，您可以在 SO 链接中看到渲染函数的工作原理。 stackoverflow.com/a/50137354/3261560
再一次，这是“它有效”但不是我通常会做的事情的情况之一。它确实直接回答了这个问题，但是，有更正确的方法来处理所需的结果。我的回答“有效”，即使它不是最佳实践。
文档说组件可以是 Promise，但是在 Promise 实现后组件被缓存。

【解决方案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 逻辑，并在路由到它之前设置您希望的任何组件。

【讨论】：

【解决方案3】：

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

{
  path: '/',
  component: () => { 
    if (store.state.domain) {
      return import(/* webpackChunkName: "app-home" */ '../views/AppHome.vue');
    } else {
      return import(/* webpackChunkName: "home" */ '../views/Home.vue');
    }
  }
},

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

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

【讨论】：