VueJS: Как определить маршрут «от», когда маршрут в URL-адресе напрямую вводится в браузере? - PullRequest
Новая
       21

VueJS: Как определить маршрут «от», когда маршрут в URL-адресе напрямую вводится в браузере?

0 голосов
/ 24 июня 2019

У меня есть приложение Vue и несколько маршрутов (будем называть их " homepage ", " first_route " и " second_route "). Прежде чем загрузить компонент для маршрута " first_route ", я хочу проверить, откуда пришел пользователь.

Есть два варианта:

  • в приложении есть меню, и когда пользователь щелкает по нему, он пытается получить доступ к соответствующему маршруту, по которому щелкнули (представьте, что это простое меню с такими элементами, как " Панель инструментов ", " О нас"," Контакт"страницы, в моем случае это будут" Страница первого маршрута"," Страница второго маршрута"и У меня также будет маршрут "/" в этом меню, который является " HomePage " моего приложения);
  • пока пользователь находится на определенном маршруте, он может обновить браузер, который снова загрузит его текущий маршрут ИЛИ , находясь на другом сайте (например, в Google), он может попытаться открыть маршрут как "www.mypage.com/first_route"

В общем, идея такова:

  • если пользователь приходит из текущего приложения (внутреннее - если он щелкает в нем)
  • если пользователь пришел с какого-либо внешнего сайта или обновил страницу

Я публикую свой код ниже, и у меня возникают проблемы при формировании условия if в блоке ниже: 

    export default new Router({
        mode: 'history',
        routes: [
            {
                path: "/",
                component: HomePage
            },
            {
                path: "/first_route",
                component: FirstRoutePage,
                beforeEnter (to, from, next) {
                    if (check where the route comes from)
                        // do something if the route comes from page refresh 
                        // or if user directly entered "/first_route" from external site
                    } else {                                     
                        // do something else if the route comes as a result of 
                        // a user click from another route (internal, from the menu)
                    }
                }
            },
            {
                path: "/second_route",
                component: SecondRoutePage
            }
]

Я пытался проверить: 

beforeEnter (to, from, next) {
    if (to.path == from.path)
        // do something if the route comes from page refresh 
        // or if user directly entered "/first_route" from external site
    } else {                                     
        // do something else if the route comes as a result of 
        // a user click from another route (internal, from the menu)
    }
}

Но это касается только случая, когда пользователь обновляет браузер. Случай, когда пользователь вводит полный URL-адрес непосредственно в браузер, не охватывается этим решением.

Основная проблема : когда пользователь вводит полный URL-адрес непосредственно в браузер, значение, распознаваемое для маршрута from для from.path, равно «/». Если мы находимся на «Домашней странице» (какой маршрут «/», и если пользователь щелкает по меню и выбирает страницу « / first_route »), то у нас будет то же условие, что и истина.

В обоих случаях маршруты from и to идентичны. И это противоречивая вещь: в первом случае мы поступаем с внешнего сайта, а во втором - с маршрута "/" (HomePage), но в обоих случаях выполняется одно и то же условие (from.path == "/" && to.path == "/first_route"), поэтому Я не могу определить, какой из двух основных сценариев (сверху) был достигнут.

1 Ответ

0 голосов
/ 24 июня 2019

вы можете попробовать сделать это в вашем методе create (). 

if (this.$route.params.id)
        // do something if the route comes from page refresh 
        // or if user directly entered "/first_route" from external site
    } else {                                     
        // do something else if the route comes as a result of 
        // a user click from another route (internal, from the menu)
    }

и в вашем роутере просто установите идентификатор. 

{
      path: '/example/:id/',
      name: 'example',
      component: () => import(/* webpackChunkName: "about" */ './components/example.vue')
    }
...