VueJS: How to determinate the “from” route, when route in URL is directly entered in browser?

Question

I have a Vue application and a few routes (let's refer to them as " homepage ", " first_route " and " second_route "). Before loading the component for the " first_route " route, I want to check from where the user comes from.

There are two options:

• there is a menu in the app and when user clicks in the menu, he will try to access to the corresponding clicked route (imagine this as a simple menu with items like " Dashboard ", " About Us ", " Contact " pages, just in my case will be " First Route Page ", " Second Route Page " and I will also have the route "/" in this menu, which is the " HomePage " of my application);
• while user is on a certain route, he can refresh the browser, which will load his current route again OR while he is on a different site (google for example) he can try to directly open the route like "www.mypage.com/first_route"

In general, the idea is:

• if the user comes from the current application (internal - if he clicks in it)
• if the user comes from some external site or if he refresh the page

I'm posting my code below and I'm having issue in forming the if condition in the block below:

    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
            }
]

What I tried is to check:

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

But this covers only the case when user refreshes the browser. The case when user enters directly the full URL into the browser is not covered with this solution.

The main problem is : when user enters directly the full URL into the browser, the value which is recognized for the from route for from.path is "/". If we are in the "HomePage" (which route is "/" and if user clicks on the menu and chooses the " /first_route " page) then we will have the same condition to be true.

In the both cases the from and to routes are identical. And this is the contradictory thing: in the first case we are coming from the external site and in the second case we are coming from the "/" route (HomePage) but in the both cases the same condition (from.path == "/" && to.path == "/first_route") is true, so I can not determinate which of the main two scenarios (from above) was hit.

Answer 1

you could try do this in your created() method.

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

and in your router just set the id.

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