i have 4 pages

1. list home [ Home.vue ]
2. create home [ CreateOrView.vue ]
3. view home [ CreateOrView.vue ]
4. summary [ Summary.vue ]

from page list home i have 2 button

• first button

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

• second button

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

then on page view home

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

the last one page summary i have back button with router back or go(n) like these https://stackoverflow.com/a/48123669/8122500

---

unExpected : list home --> view home --> summary --> go back --> create home

expected : list home --> view home --> summary --> go back --> view home

expected : list home --> summary --> go back --> list home

---

then my problem is when i go back ( from summary ) its clear params on previous. so when i go back the view is create home , my expected is view home.

i looking for best tricks ...

i have code

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

but in other case i have much page (more than 4 pages ) so its not solve .

CodePudding user response：

router.go/router.back are very close to window.history.go APIs which need strict debugging if it comes to history manipulation and we manage them by using tricks like hardcode the numbers, router.go(1), router.go(2), etc.

If you are looking for a better approach for router navigation (forward and backward), write the navigation process inside the route's meta properties.

For example, if you want to navigate back from Summary.vue page to ViewHome.vue page, then you can write this logic inside your summary route like this-

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

And your back button inside Summary.vue would look like this-

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

Using this approach you will always be sure that back button from Summary.vue page will always redirect to ViewHome.vue page.

The same meta-property concept can be used for all routes you want to navigate forward and backward.

CodePudding user response：

This part of the code the person in the other question put to check that the user would "go back" to their application and not a 3rd party's website. If you want to keep that functionality I suggest you keep that as:

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

To go back one page you can do $router.go(-1) or $router.back() like so: <button @click="$router.go(-1)">back</button>.

If you need to add the params you can use beforeRouteEnter navigation guard and use router.push() in your back button. Here's some boilerplate:

// 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>