@voyom/vue-router
v3.3.2
Published
voyo-micro vue-router --- ### About
Downloads
2
Maintainers
Readme
voyo-micro vue-router
About
Routing configuration loaded by micro-module.
Expend the vue-router(^v3.0)
.
Install
npm i @voyom/vue-router
Usage
main.ts
import { VoyoRouterMain} from "@voyom/vue-router";
import {createRouter} from "vue-router";
const voyoRouterMain=new VoyoRouterMain({
routes:[
{
path:"/a",component:A
},
{
path:"/module-a",
module:()=>import("a.module")
}
]
});
const vueRouter=createRouter({
routes:[]
});
voyoRouterMain.mount(vueRouter);
a.module.ts
import {VoyoRouterChild} from "@voyom/vue-router";
export default new VoyoRouterChild({
routes: [
{
path: "c",component: C
},
{
path: "d",
module: ()=>import("a-child.module") //Load A deeper module.
},
],
})
Cache Router
import { VoyoRouterView, routerChangeService } from "@voyom/vue-router";
routerChangeService.routerMode = "hash"; // "hash" | "history" ;
Vue.component("voyo-router-view",VoyoRouterView);
As the page forward , the old page is automatically pushed into the cache.
When returned, the current page is destroyed, the cached page is automatically restored.
Page component will have new life hooks,when you use voyo-router-view
:
- onShow() When page is visible.
- onHide() page hidden
restore scroll position
- Restore body scrollPosition
(pc)
- Each page has its own
scroll-view
(mobile)
.scroll-view
restore scrollPosition whenconnectedCallback()
oractivated()
callback;