Guide

Introduction

history-navigation-vue is a native-like Navigation for Web apps. It base on HTML5 History (opens new window) and implemented by Vue (opens new window).

• It is a multi-page architecture in the single-page apps.
• It supports Tabbar mode.
• It supports Modal mode.
• It supports "Press Back Again to Exit".
• It can set various transition effects at will.
• It can be perfectly combined with the system/browser back button.
• It is small, less than 9 KiB min+gzip(CSS + JS).

Compatibility Note

Browser / Webview

history-navigation-vue required HTML5 History API (opens new window) and not has fallback.

Vue

Required Vue version is 2.1.8+.

Vue 3: Not currently supported.

Installation

NPM

npm install history-navigation-vue

Load by Webpack

import 'history-navigation-vue/dist/history-navigation-vue.css';
import * as historyNavigationVue from 'history-navigation-vue';

HTML Direct include

Simply download and include with a script tag. historyNavigationVue will be registered as a global variable.

The built file is in the dist directory of the project

<!-- css -->
<link rel="stylesheet" href="..somedir/history-navigation-vue.min.css" />
<!-- js -->
<script src="..somedir/history-navigation-vue.min.js"></script>

Tutorials

Hello World

• First you need set up the global config and Install as a Vue plugin.
• You will get a global component <NavigationController>, It's Root container.
• You will also get another global component: <Navigator>, With it, You can use it to jump between different pages.

window.Vue.use(window.historyNavigationVue.plugin, 
{
  pages: [
    {
      path: '/',
      component: {
        template: `<div>
          <h1>Hello</h1>
          <Navigator url="/detail">To Detail</Navigator>
        </div>`
      }
    },
    {
      path: '/detail',
      component: {
        template: `<div>
          <h1>World!</h1>
          <Navigator type="back">Back</Navigator>
        </div>`
      }
    }
  ]
});
new window.Vue({
  el: '#app',
  template: '<NavigationController class="root" />'
});

Preview (opens new window)

Tabbar

If there is a tab bar at the bottom of your project design. But it's a web project. How to do?

With this project, Just Add an tabBar option:

{
  pages: [
    {
      path: '/',
      component: {
        template: '<h1>Home</h1>'
      }
    },
    {
      path: '/me',
      component: {
        template: '<h1>Me</h1>'
      }
    }
  ],
  tabBar: {
    list: [
      { pagePath: "/", text: "Home" },
      { pagePath: "/me", text: "Me" }
    ]
  }
}

Preview (opens new window)

Modal

Do you want a modal box that can be closed when the back button is clicked?

<script type="text/x-template" id="modal">
  <div class="modal">
    <div class="modal-mask" @click="closeModal" />
    <div class="modal-main">
      <h1>{{text}}</h1>
      <button style="font-size: 20px;" @click="close">Close</button>
    </div>
  </div>
</script>
<script>
var Modal = {
  props: ['text'],
  template: '#modal',
  methods: {
    close(){
      this.$navigator.back();
    }
  }
};
var Index = {
  template : '<button @click="showModal">showModal</button>',
  methods: {
    showModal(){
        this.$navigator.modal({
            component: Modal
            propsData: {
              text: 'Hello Modal!'
            }
      });
    }
  }
}
// ...
</script>

Preview (opens new window)

Press Back Again to Exit

Do you want to be able to "Press Back Again to Exit" on PWA?

var config = {
  pages: [
    {
      path: '/',
      component: {
        template: '<h1>Press Back Again to Exit</h1>'
      }
    }
  ],
  backAgainToExit: {
    maxInterval: 1500,
    onFirstTrigger() {
      window.$simpleTips.tips('Press Back Again to Exit');
    }
  }
}
// ...

Preview (opens new window)

Transition

By default, this project provides some simple transitions. You can change it, Just modify the CSS.

WARNING

Please pay attention to performance, especially on mobile.

Example

.h-nav-behavior-push > .h-nav-transition,
.h-nav-behavior-back > .h-nav-transition{
  transition: all 1s ease;
}
.h-nav-behavior-push > .h-nav-transition > .h-nav-page-enter,
.h-nav-behavior-back > .h-nav-transition > .h-nav-page-leave-to{
  transform: translateX(100%);
}
.h-nav-behavior-push > .h-nav-transition > .h-nav-page-leave-to,
.h-nav-behavior-back > .h-nav-transition > .h-nav-page-enter {
  transform: translateX(-33%);
}

Preview (opens new window)