[英]VueJS: How to determinate the “from” route, when route in URL is directly entered in browser?
I have a Vue application and a few routes (let's refer to them as " homepage ", " first_route " and " second_route "). 我有一个Vue应用程序和一些路由(让我们将它们称为“ 主页 ”,“ first_route ”和“ second_route ”)。 Before loading the component for the " first_route " route, I want to check from where the user comes from.
在为“ first_route ”路由加载组件之前,我想检查用户来自何处。
There are two options: 有两种选择:
In general, the idea is: 一般来说,这个想法是:
I'm posting my code below and I'm having issue in forming the if condition in the block below: 我在下面发布我的代码,我在下面的块中形成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
}
]
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.
用户直接将完整URL输入浏览器的情况不在此解决方案中。
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 "/". 主要问题是 :当用户直接将完整的URL输入浏览器时,
from.path
的from路由from.path
值为“/”。 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. 如果我们在“HomePage”(哪条路线是“/”,如果用户点击菜单并选择“ / first_route ”页面),那么我们将具有相同的条件。
In the both cases the from
and to
routes are identical. 在这两种情况下,
from
和to
路径是相同的。 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. 这是矛盾的事情:在第一种情况下,我们来自外部网站,在第二种情况下,我们来自“/”路线(HomePage)但在两种情况下都是相同的条件
(from.path == "/" && to.path == "/first_route")
是真的,所以我无法确定哪两个主要场景(来自上面)被击中。
you could try do this in your created() method. 您可以尝试在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)
}
and in your router just set the id. 并在你的路由器中设置id。
{
path: '/example/:id/',
name: 'example',
component: () => import(/* webpackChunkName: "about" */ './components/example.vue')
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.