Enable vue-router routing for google webcache(and same caches)
npm install vue-router-webcache> A set of helpers for vue-router to working with google webcache and similar
yarn add vue-router-webcache # npm i vue-router-webcache
`Compatibility caches
From the box this package support https://webcache.googleusercontent.com/ and https://yandexwebcache.net caches for SPA/SSR. If you need more cache types, you always can reassign the cacheList by add cache to any of helpers as second arg.
`js
import { isCacheUrl, defaultCacheUrls } from 'vue-router-webcache';const additionalCacheUrls = [
{
hostname: 'localhost',
pathname: '/search',
getRealUrl: (url) => url,
},
];
const isCache = isCacheUrl(window.location.href, [
...defaultCacheUrls,
...additionalCacheUrls,
]);
`getRealUrl - is optional prop, to extract realUrl for SPA apps or for SSR without vuex-router-sync.Compatibility Vue
Current package support Vue 2 (vue-router@3) and Vue 3 (vue-router@4).Nuxt basic usage
1. Install package
2. Install @nuxtjs/router
3. Add vue-router-webcache/nuxt and @nuxtjs/router to nuxt.config.js
4. Add router.js to .gitignore
`js
export default {
buildModules: [
'vue-router-webcache/nuxt',
['@nuxtjs/router', {
keepDefaultRouter: true,
}],
]
};
`
After first build, package create router.js in root of project nuxt-community/router-module#107> If you change generated
router.js, don't forget remove first two linesBy default
vue-router-webcache/nuxt use nuxt-vuex-router-sync to get real urlExample in test/fixtures/nuxt
Nuxt advanced usage
If you use custom router or you need more caches, you can customize options or use only helpers without module
`js
export default {
buildModules: [
['vue-router-webcache/nuxt', {
cacheList: [{
hostname: '',
pathname: '',
getRealUrl: (url) => url,
}],
replacePush: true,
forceVuexRouterSync: false,
urlGetter: () => '',
}],
['@nuxtjs/router', {
keepDefaultRouter: true,
}],
]
};
`
cacheList - list of caches, checks work through URLreplacePush - default @nuxtjs/router replace router.push, you can disable iturlGetter - function that return fullPath or current real url, serialized by Function.toString, exec in browserforceVuexRouterSync - option to force add module nuxt-vuex-router-sync and use urlGetter for it. Can be enabled automatically if some of cache's in cacheList hasn't getRealUrl and you don't reassign urlGetter---
Default
vue-router-webcache/nuxt configFull example in test/fixtures/nuxt-custom
If you don't change
urlGetter, but add some cache without getRealUrl, vue-router-webcache/nuxt add nuxt-vuex-router-sync module to save realUrl in store.stateVue-router usage
1. Install package
2. Create Router by helper
`js
import createRouter from 'vue-router-webcache';const router = createRouter(routerOptions);
`How it work
- Check if window.location.href is url of some caches
- Change mode of router to abstract
- Get real url of cached page
- Nuxt, add nuxt-vuex-router-sync (or analogs) and get window.__NUXT__.state.route.fullPath
- Vue, get url from window.location.query for example
- After Router created, set current route
- Nuxt, mock first router.resolve call patchNuxtRouter
- Call router.replace(realUrl)Api
$3
> Helper that create
vue-router instance with routerOptions, but change mode to abstract and call router.replace if page in caches list`js
import createRouter from 'vue-router-webcache';const router = createRouter(routerOptions, [
{
hostname: '',
pathname: '',
getRealUrl: (url) => url,
},
]);
`
routerOptions - simple vue-router optionsadditionalCacheList - caches that will be added to the defaults (optional)$3
> Array of default cache urls
`js
import { defaultCacheUrls } from 'vue-router-webcache';
`$3
> Get cache by fullUrl
`js
import { getCache } from 'vue-router-webcache';const cache = getCache(window.location.href, [
{
hostname: '',
pathname: '',
getRealUrl: (url) => url,
},
]);
`fullUrl - url of checked pagecacheList - list of caches to check (optional)$3
> Url checker
`js
import { isCacheUrl } from 'vue-router-webcache';const isCache = isCacheUrl(window.location.href, [
{
hostname: '',
pathname: '',
},
]);
`fullUrl - url of checked pagecacheList - list of caches to check (optional)$3
> Helper trying to get realUrl from cached url (use
getRealUrl functions from cacheList)`js
import { getRealUrl } from 'vue-router-webcache';const realUrl = getRealUrl(window.location.href, [
{
hostname: '',
pathname: '',
getRealUrl: (url) => url,
},
]);
`fullUrl - url of checked pagecacheList - list of caches to check (optional)$3
> Helper extract
fullPath from realUrl and cut base(second argument)`js
import { getFullPath } from 'vue-router-webcache';const fullPath = getFullPath('http://example.com/foo/bar', '/foo');
// /bar
`fullUrl - url for extractingbase - base url of your app (default=/)$3
> Router patcher for nuxt, mock first
router.resolve`js
import { patchNuxtRouter } from 'vue-router-webcache';...
patchNuxtRouter(router, realUrl);
`router - instance of vue-router
href - real url of current pageExamples
All usage examples you can see in test/fixturesURL
Helpers use URL` constructor to parse url's. Mb you need install polyfill to use it.