Как перенаправить нединамические URL с помощью vue-router - PullRequest
Новая
       12

Как перенаправить нединамические URL с помощью vue-router

0 голосов
/ 04 мая 2018

У нас есть приложение vue.js для страховой компании, где у каждого агента есть свой динамически генерируемый веб-сайт. В настоящее время, если вы посетите бессмысленную ссылку, на ней будет показан пустой шаблон агента. Нам нужны URL-адреса, которые не содержат слаг агента, чтобы перенаправить на наш компонент NotFound.

Ниже приведен код vue-router, если есть простое решение. В противном случае проще добавить вычисляемую функцию для перенаправления посетителя, если, например, agent.name == null?

Спасибо за любую помощь!

Пример хорошего URL: https://my.piaselect.com/georgebeach

Пример неверного URL: https://my.piaselect.com/georgebeach2

Наш роутер: 

{
  path: "/:id",
  component: AgentSite,
  name: 'AgentSite',
  props: true
},
{
    path: '*',
    name: 'NotFound',
    component: NotFound
}

Ответы [ 2 ]

0 голосов
/ 04 мая 2018

это не работает, потому что вы не указываете имя в этом пути: 

{
  path: "/:id",
  component: AgentSite,
  name: 'AgentSite',
  props: true
},

из-за этого этот путь позволяет любым случайным символам в корне возвращать компонент AgentSite (но пустой, потому что случайные символы "param" не соответствуют никому в компоненте, я думаю).

Чтобы предотвратить это, вы можете указать имя для вашего пути: path: "agent/:id" например.

Редактировать : кажется, у вас уже есть отличное решение здесь ...

0 голосов
/ 04 мая 2018

Опираясь на то, что сказал @Jacob Goh.

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

https://router.vuejs.org/en/advanced/navigation-guards.html

Я не проверял это, но вы должны понять основную идею. 

const agentIds = ['Bob', 'Michael']

const router = new VueRouter({
  routes: [
    {
      path: '/foo:id',
      component: Foo,
      beforeEnter: (to, from, next) => {
        if (agentIds.includes(to.params.id)) {
          // The agent is fine - continue
          next();
        } else {
          // doesn't exist - go back to root or any other page
          next({ path: '/' });
        }
      }
    }
  ]
})
...