Skip to content
History State Module for Nuxt.js
JavaScript Vue
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode
docs
lib
test
types
.editorconfig
.eslintignore
.gitignore
CHANGELOG.md
LICENSE
README.md
babel.config.js
jest.config.js
package-lock.json
package.json

README.md

History State Module for Nuxt.js

npm version License: MIT

Nuxt.js module to backup or restore historical states.

Features

  • Restore a last state when going forward or back.
  • Restore a state when reloading.
  • Restore a last state when going forward or back after reloading. (optional)

Install

Using npm:

npm install nuxt-history-state

Setup

nuxt.config.js

module.exports = {
    // enable a module
    modules: [
        'nuxt-history-state'
    ],

    // set options (see below section)
    historyState: {
        reloadable: false, // or true
        overrideDefaultScrollBehavior: true // or false
    }
}

Options

reloadable

Indicates whether this module works properly after reloading.

It uses HTML5 History API state by default. However It does not fully support reloading. This API does not work properly when goes back or forward after reloading.

If you set this option to true, It adds a parameter _p to url instead of using HTML5 History API state.

Default: false

overrideDefaultScrollBehavior

Indicates whether this module override a default scroll behavior of the router.

If you set this option to true, It manages a scroll behavior by using own saved position.

Default: true

Usage

Backup component data

If you want to backup data, you have to define a backupData lifecycle method. I recommend that you define it to page components only.

export default {
    backupData() {
        return this.$data;
    }
}

Restore component data

You can access to backup data through $historyState object of this or context.

export default {
    // Access to backup data in a asyncData or fetch method.
    async asyncData({ $historyState, $http }) {
        // Overwrite value on a new page only
        if ($historyState.action === 'navigate' || $historyState.action === 'push') {
            return await $http.$get(...);
        }
        return {};
    }

    // Access to backup data in lifecycle methods of the instance.
    data() {
        return this.$historyState.data || {
            ...
        };
    }
}

API

$historyState

action

A action type that caused a navigation.

  • navigate: When a new page is navigated.
  • reload: When a page is reloaded.
  • push: When a history.push is called.
  • forward: When a forward navigation is occurred.
  • back: When a back navigation is occurred.
  • invalid: When a history stata is invalid.

By default this method returns basically 'navigate' on server. But many browsers send cache-control='maxage=0' when reloading. It heuristically returns 'reload' then.

If you set the reloadable option to true, it detects 'navigate' or 'reload' by using _p parameter.

page

A current page number (an integer beginning with 0).

By defalut this method always returns 0 on server. If you set the reloadable option to true, it returns the currect page number by using _p parameter.

data

A backup data.

This method always returns null on server.

length

A history length.

This method cannot use on server.

getItem(page)

You can get a location and data of the specified page number.

This method cannot use on server.

getItems()

You can get a list of item.

This method cannot use on server.

findBackPosition(location)

You can get the relative position of the first matched history, searching backward starting at the current page. If a history state is not found, this method will return null.

This method cannot use on server.

const delta = this.$historyState.findBackPosition({
    path: 'test'
    // hash: ...
    // query: ...
    // name: ...
    // params: ...
});
if (delta != null) {
    this.$router.go(delta);
}

License

MIT License

Copyright (c) Hidekatsu Izuno (hidekatsu.izuno@gmail.com)

You can’t perform that action at this time.