vue2返回没有明确参数最近push

Question

我有4页

1. list home [home . home]vue)
创建home [CreateOrView. view]vue)
2. 查看home [CreateOrView. view]vue)
3. summary[摘要。vue)

from pagelist homei have 2 button

• 第一个按钮

:to="{
name: 'view-home',
params: {
id: props.row.detail_id,
api: 'view_home'
}
}"'

<<ul>

第二个按钮/gh>

:to="{
name: 'summary',
params: {
id: props.row.detail_id,
api: 'view_home'
}
}"'

然后在view home页

:to="{
name: 'summary',
params: {
id: props.row.detail_id,
api: 'view_home'
}
}"'

最后一页summary我有返回按钮使用router back或go(n)像这样https://stackoverflow.com/a/48123669/8122500

---

意外:列表首页——>查看主页——>总结——比;回去——>创建家庭

:列表首页——>查看主页——>总结——比;回去——>看来家里

:列表首页——>总结——比;回去——>家列表

---

那么我的问题是，当我回到(从摘要)它的明确参数在前面。所以当我返回时，视图是create home，我的期望是view home.

我正在寻找最好的技巧…

i have code

hasHistory() {
return window.history.length > 3
},

但在其他情况下，我有很多页(超过4页)，所以它不解决。

Answer 1

router.go/router.back非常接近window.history.goapi，需要严格的调试，如果涉及到历史操作，我们通过使用硬编码数字，router.go(1),router.go(2)等技巧来管理它们。

如果你正在寻找一种更好的路由导航方法(向前和向后)，把导航过程写在路由的元属性中。

例如，如果你想从Summary.vue页面导航回ViewHome.vue页面，那么你可以在你的摘要路由中这样写这个逻辑——

{
path: "/summary",
name: "Summary",
component: "SummaryComponent"
meta: {
backRoute: "ViewHome"
},
},

在Summary.vue中的后退按钮看起来像这样-

<button @click=$router.push({ name: $route.meta.backRoute })>Go Back</button>

使用这种方法，您将始终确保后退按钮从Summary.vue页面将始终重定向到ViewHome.vue页面。

同样的元属性概念可以用于你想要向前和向后导航的所有路由。

Answer 2

这部分代码是另一个问题中的人用来检查用户是否会"返回"的。他们的应用程序，而不是第三方网站。如果您想保留该功能，我建议您将其保留为:

hasHistory() {
// this can stay at 2 and your user will only navigate "back" if the last route was part of your app
return window.history.length > 2;
}

要返回一页，可以按$router.go(-1)或$router.back():<button @click="$router.go(-1)">back</button>.

如果你需要添加参数，你可以使用beforeRouteEnter导航保护和使用router.push()在你的后退按钮。下面是一些样板文件:

// Summary.vue
<template>
<button @click="$router.push(previousRoute)>Back</button>
</template>
<script>
beforeRouteEnter (to, from, next) {
next(vm => {
vm.previousRoute = from;
});
},
data () {
return {
previousRoute: undefined
}
}
</script>