tb-vue-hash-router

Vue hash router plugin (with disabled back button)

Usage

Install in your VueJS project:

npm i -s tb-vue-hash-router

Import in main.js and install it with a landing page:

import HashRouterPlugin from 'tb-vue-hash-router'

Vue.use(HashRouterPlugin, { landingPage: 'my-custom-starter-page' })

Vue.component('my-custom-starter-page', MyCustomStarterPage)

All your pages should be globally installed in main.js!

import MyCustomStarterPage from './components/my-custom-starter-page'

In your root vue component:

<template>
  <div>
    <page-root></page-root>
  </div>
</template>

And you are good to go!

API:

The default usage (with globally installed pages):

methods: {
  navigateToHome: function() {
    this.$navigate('home-page')
    // the page rendered in <page-root> is home-page.vue
    // hash is #home
    // back button still useless
  }
}

...or simply from the template:

<template>
  <div>
    <button @click="$navigate('home-page')">Home</button>
  </div>
</template>

The param of $navigate function is always a string: the name of a globally registered page.

Full API:

// simple redirect without params
this.$navigate('home-page')

// simple redirect with params - available in next page with $getRedirectParams
this.$navigate('home-page', { someKey: "someValue" })

// loads the redirect params (most likely in created() lifecycle method)
/*
  in a page loaded with #products?id=5
  the object { id: 5 } is available
  with $getRedirectParams
*/
let params = this.$getRedirectParams()

// adds ?id=5 to the hash
this.$addToQueryParams("id", 5)

// deletes query param id if exists
this.$deleteQueryParam("id")

// deletes all query params
this.$deleteQueryParams()

// updates multiple params to the hash: ?id=5&show=false
// previous params deleted
this.$updateQueryParams({ id: 5, show: false })