vue2 go back without clear params on recently push

Question

i have 4 pages

list home [ Home.vue ]
create home [ CreateOrView.vue ]
view home [ CreateOrView.vue ]
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 .

Langlois.dev · Answer 1 · 2023-01-19T05:43:46.523

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>

i think its will complicated if use vuex , now i use my trick with passing ```currentRoute``` ```previous_link: { name: 'list-home' }``` so when i need go back .. i use ```:to="$router.currentRoute.params.previous_link"``` — Yogi Arif Widodo, Jan 19 '23 at 05:35
After thinking about it, you could avoid using the state completely and use the component navigation guard `beforeRouteEnter` in `Summary.vue` — Langlois.dev, Jan 19 '23 at 05:37

score 1 · Answer 2 · answered Jan 19 '23 at 05:33

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.

let me test it wait , I doubt about the params , because view home need dataID /props.row.detail_id . — Yogi Arif Widodo, Jan 19 '23 at 05:47
i think i just use my trick ```previous_link: $router.currentRoute``` on any ```params``` have the properties. because if wee need to keep the last `detail id` still need/use `vuex `. but thankyou if we use like above the code will be more clean, nice. — Yogi Arif Widodo, Jan 19 '23 at 06:09

vue2 go back without clear params on recently push

2 Answers2