wbRoutes2 Documentation

Appearance

🚀 Integration Guide for WBC-Routes2 ​

This guide walks you through how to set up WBC-Routes2 in your Vue 2.7 application using Vue Router and the wbc-ui2 plugin.

📦 1. Prerequisites ​

  • Vue 2.6+ (preferably 2.7.x)
  • Vue Router installed
  • wbc-ui2 plugin available in your project

🛠 2. Install wbc-ui2 ​

If you haven’t already, install the wbc-ui2 plugin into your project:

$$$bash npm install wbc-ui2

or ​

yarn add wbc-ui2 $$$

🔧 3. Configure Vue to Use WBC ​

In your main.js:

$$$js import Vue from "vue"; import App from "./App.vue"; import router from "./router"; import WBC from "wbc-ui2";

Vue.use(WBC);

new Vue({ router, render: h => h(App) }).$mount("#app"); $$$

🧭 4. Set Up Basic Routing with WBC ​

In your router/index.js:

$$$js import Vue from "vue"; import Router from "vue-router"; import WBC from "wbc-ui2";

Vue.use(Router);

export default new Router({ mode: "history", routes: [ { path: "/docs", name: "DocsPage", component: WBC, props: { item: "./docs/intro.md" } } ] }); $$$

🌍 5. Add Multi-Language Routing ​

You can serve different language versions using an object:

$$$js props: { item: { en: "./docs/home.en.md", fr: "./docs/home.fr.md", ar: "./docs/home.ar.md" } } $$$

🔐 6. Encrypted Dynamic Routes ​

If you want to pass dynamic encrypted content:

  1. Compress the item value:

$$$js import { compressToEncodedURIComponent } from "lz-string";

const encryptedItem = compressToEncodedURIComponent(JSON.stringify([ "Welcome to dynamic route!", "./docs/intro.md" ])); $$$

  1. Use the encrypted string in route:

$$$js { path: "/encrypted/:item", name: "EncryptedRoute", component: WBC, props: route => ({ item: JSON.parse(decompressFromEncodedURIComponent(route.params.item)) }) } $$$

🧩 7. Injecting Metadata ​

Via route meta:

$$$js meta: { comp: "meta", title: "Dynamic Page", description: "Loaded dynamically with SEO optimization", keywords: ["vue", "routing", "meta"] } $$$

Or via props item array:

$$$js props: { item: [ "./docs/page.md", { comp: "meta", title: "Page Title" } ] } $$$

src/ ├── public/ 
│ └── docs/ │ 
├── home.en.md │ 
├── home.fr.md │ 
└── home.ar.md

🧪 9. Testing ​

  • Use console.log(route.params.item) in dynamic props
  • Validate meta tags in browser <head>
  • Check language switching behavior

✅ Summary ​

With WBC-Routes2, you can:

  • Define routes with Markdown, objects, JSON, and HTML
  • Dynamically load multilingual content
  • Pass encrypted dynamic route props
  • Inject SEO-ready metadata

All with a single lightweight component: WBC.

Let your Vue routes speak multiple languages — and do more. """