VueJS：当URL中的路由直接在浏览器中输入时，如何确定“来自”路由？

Question

我有一个 Vue 应用程序和一些路由（我们将它们称为“homepage”、“first_route”和“second_route” ）。在为“first_route”路由加载组件之前，我想检查用户来自哪里。

有两种选择：

• 应用程序中有一个菜单，当用户点击菜单时，他会尝试访问相应的点击路径（想象这是一个简单的菜单，其中包含“Dashboard”、“ 关于我们”、“联系方式”页面，就我而言将是“First Route Page”、“Second Route Page”，我也会在这个菜单中有路由“/”，也就是我的应用程序的“HomePage”）；
• 当用户在某个路线上时，他可以刷新浏览器，这将再次加载他当前的路线或当他在不同的网站（例如谷歌）上时，他可以尝试直接打开像“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.path 的 from 路由识别的值为“/”。如果我们在“主页”（哪个路由是“/”并且如果用户单击菜单并选择“/first_route”页面），那么我们将有相同的条件为真。

在这两种情况下，from 和 to 路由是相同的。这是矛盾的：在第一种情况下，我们来自外部站点，在第二种情况下，我们来自“/”路由（主页），但在这两种情况下，(from.path == "/" && to.path == "/first_route") 的条件相同，所以我无法确定（从上面）主要的两个场景中的哪一个被击中。

Answer 1

您可以尝试在您的 created() 方法中执行此操作。

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

然后在您的路由器中设置 id。

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