How to change Navbar links by route?

[andyslack]

Hi guys,

I am looking to build a large documentation portal which would benefit from a changing Navbar / navbar items based on the router path.

For example:

-- readme.md `/` --> default navbar
-- Backend
        -- readme.md `/backend` --> backend navbar
-- Frontend
       -- readme.md `/frontend` --> frontend navbar

I have tried a few things but I cannot for the life of me work out how to switch the menu based on the path.

Any suggestions?

[andyslack]

I have managed to get an MVP working using the following code:

import { defineClientConfig } from '@vuepress/client'
import {homeNavbar} from "./theme/config/home";
import {quasarNavbar} from "./theme/config/frontend/quasar";

export default defineClientConfig({
	enhance({ app, router }) {

		router.afterEach((to) => {

			if (to.path === '/') {
				app.config.globalProperties.$theme.navbar = homeNavbar
			}

			if (to.path.includes('/frontend/quasar')) {
				app.config.globalProperties.$theme.navbar = quasarNavbar
			}

		})
	}
})

Hope it helps someone.

[Mister-Hope]

A nice hack.