Dynamic routes do not get generated with build

[mdaffin]

You have access to the route via .vuepress/enhanceApp.js and can add extra routes such as:

export default ({ Vue, router, options }) => {
  router.addRoutes([
    { path: '/test', redirect: '/' }
  ])
}

or

const Test = () => import("./Test");

export default ({ Vue, options, router }) => {
  router.addRoutes([
    { path: "/test", component: Test }
  ]);
};

And they work as expected when you run it is dev mode vurepress dev site. But when building the app vurepress build site the added routes do not get generated/prerendered, resulting in a 404 when trying to load the route for the first time.

As far as I can tell there is no other way to add routes to the generated list of routes which means that routes cannot be added dynamically via the site or themes.

[ycmjason]

Maybe try to use the config.nav or config.sidebar? Not sure if the pre rendering respects the manual routes from vue router.

[mdaffin]

Even it that works there are pages I want to be rendered (redirect links) that I do not want to appear in the sidebar or nav menu. We need a way to add extra routes through the config and via themes for this to work fully.

[stickmy]

util.js
Here, the router option is been created by new Router(), so this router option cannot add extra routes

[mdaffin]

@Bloss utils.js or app.js? Not that it matters both of them are client-side scripts and the problem is with the server-side prerendering.

There is no problem with adding new routes in the client-side applications - they work as expected when in dev or SPA mode. The problem is when you go to build the app the server-side it does not know about the extra routes and so does not prerender the pages. This results in a 404 when you first hit them (but then work if you navigate to them once in SPA mode).

[meteorlxy]

According to the following code, what should be rendered is determined by the siteData.pages:

vuepress/lib/build.js

Lines 63 to 67 in f0b33e1

	// render pages
	console.log('Rendering static HTML...')
	for (const page of options.siteData.pages) {
	await renderPage(page)
	}

The original routes file is generated from siteData.pages, too:

vuepress/lib/prepare.js

Lines 277 to 307 in f0b33e1

	async function genRoutesFile ({ siteData: { pages }, sourceDir, pageFiles }) {
	function genRoute ({ path: pagePath }, index) {
	const file = pageFiles[index]
	const filePath = path.resolve(sourceDir, file)
	let code = `
	{
	path: ${JSON.stringify(pagePath)},
	component: Theme,
	beforeEnter: (to, from, next) => {
	import(${JSON.stringify(filePath)}).then(comp => {
	Vue.component(${JSON.stringify(fileToComponentName(file))}, comp.default)
	next()
	})
	}
	}`
	if (/\/$/.test(pagePath)) {
	code += `,{
	path: ${JSON.stringify(pagePath + 'index.html')},
	redirect: ${JSON.stringify(pagePath)}
	}`
	}
	return code
	}
	return (
	`import Theme from '@theme'\n` +
	`export const routes = [${pages.map(genRoute).join(',')}\n]`
	)
	}

Although your add routes to router, the siteData.pages won't be aware of that, and no page will be generated. That's what causes this problem.

[meteorlxy]

To make things clear:

Current routes flow is -
(1) source code
(2) prepare options
(3) generate temp routes from options
(4) load temp routes in app.js
(5) load enhanceApp which may modify routes
(6) import "enhanced" app.js in webpack entries.

In dev mode, everything is from (6) and works well.

In build mode, webapck compile from (6), and then use options from (2) to determine what should be rendered.

[david-trejo-ck]

@meteorlxy , not sure if this is what you meant, but when I tried this in enhanceApp.js, the new "page" still 404'd.

  const p = siteData.pages.find(({path}) => path === '/guide/assets.html')
  const c = {...p}
  c.path = '/guide/assets/index.html'
  siteData.pages.push(c)
  console.log('c', c)

  let r = router.options.routes.find(({path}) => path === '/guide/assets.html')
  const rNew = {...r}
  rNew.path = '/guide/assets/index.html'
  router.options.routes.push(rNew)
  console.log(rNew)

edit: i see now, you were pointing out the reason why this didn't work, nvm!

[meteorlxy]

@david-trejo-ck

1. siteData is for "read-only" purpose in enhanceApp.js, and editing on it has no effects.
2. use router.addRoutes(routes) to add new routes on router instance (https://router.vuejs.org/en/api/router-instance.html#methods).

It will work in dev mode. For build mode, see the PR above.

edit: yes I was pointing out the reason, but your code is not correct and won't work even in dev mode