在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

我之前回答同样的问题，你可以看到它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 2

吸气剂可用于这一点，但是，你需要确保导入这两个组件：

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