Условный маршрут в Vue.js - PullRequest
Новая
       40

Условный маршрут в Vue.js

0 голосов
/ 02 декабря 2018

У меня есть два разных представления, которые я хотел бы показать для одного и того же пути в зависимости от того, находится ли токен в LocalStorage или нет.Я мог бы переместить логику непосредственно в само представление, но мне было любопытно узнать, есть ли путь к нему в маршрутизаторе.

Что-то вроде: 

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

Я пытался с вышеупомянутымкод, но не работает.Приложение работает нормально, но ни одно из двух представлений не отображается.

Ответы [ 2 ]

0 голосов
/ 10 февраля 2019

Я отвечал на тот же вопрос раньше, и вы можете видеть его здесь .

Вот пример: 

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 логику в соответствии с вашими потребностями и установить любой компонент, какой пожелаете, прежде чем направлять его.

0 голосов
/ 10 февраля 2019

Для этого можно использовать геттер, но вы должны обязательно импортировать оба компонента: 

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