@vuepress/plugin-html-redirect NPM

@vuepress/plugin-html-redirect

Feature

Support virtual URLs as source URLs.
Support countdown.
Work with static base and dynamic base.

Motivation

In the site development of vuepress, a small directory structure adjustment will invalidate some URLs, but these URLs may have been published. With this plugin, you can keep those disappeared URLs forever.

Install

yarn add -D @vuepress/plugin-html-redirect
# OR npm install -D @vuepress/plugin-html-redirect

Usage

Write redirects:

The agreed file to write redirects config is /path/to/.vuepress/redirects, whose format is as follows:

[url] [redirect_url]
[url] [redirect_url]
[url] [redirect_url]
...

example:

/2020/03/27/webpack-5-module-federation/ /translations/2020/03/27/webpack-5-module-federation/

Simple usage:

// .vuepress/config.js
module.exports = {
  plugins: [
    '@vuepress/html-redirect', // OR full name: '@vuepress/plugin-html-redirect'
  ],
}

Disable countdown:

// .vuepress/config.js
module.exports = {
  plugins: [
    ['@vuepress/html-redirect', {
      countdown: 0,
    }],
  ],
}

It means that the publc path will be different acccording to the NEV you set, and the router base will be '/' when the host is hostA, and '/blog/' when the host is hostB.

Options

countdown

Type: string
Description: Control how many seconds the page will be redirected, defaults to 3.

enableHistoryRedirect

Type: boolean
Description: Enable redirects when navigation is based on History API, defaults to false.

Single Page Applications (SPA) typically only utilise one index file that is accessible by web browsers: usually index.html. Navigation in the application is then commonly handled using JavaScript with the help of the HTML5 History API, in VuePress we leverage vue-router under the hood.