About page routing

[souloss]

When we do theme customization, we often need to define routes for some pages. When I redefine the route for the 404 page, I found that it didn't work. I don't have the part I defined in the router instance. I feel very strange.
I enhanced the Vue instance with the enhancementApp.js file in the theme, where the code for the route enhancement section is:

   router.addRoutes([{
     Path: '*', redirect: '/404'
   }])

No matter how I define it, path: '*' seems to be overwritten by GlobalLayout.vue.
Is there a solution to this problem?

[souloss]

I know that defining a 404 page in the layouts folder will work, but I don't want to do this because I think the folder is for multi-layout enhancements to the document.
The view component inside a layout should be stored in another folder.

[ynnelson]

I wonder if this is similar to the issue I have been experiencing: 1803
I ended finding a workaround that is pretty, I added the routes using addRoutes so they would at least be recognized and then I created a component that on mount would do the redirection. Super ugly but this is the only thing I could get to work with the appropriate behavior.

[souloss]

@ynnelson
thank you for your reply.This is indeed feasible.
The problem I encountered is different from yours. I used addRoutes. When printing a vue instance, there is no definition of the route in $router.
I think the path: * route is overridden by the route of GlobalLayout.vue, so I redefine GlobalLayout.vue, which uses $ router.push to get around this problem.

There is no time to study recently, so my guess may be wrong.

[flozero]

Hello @Snile826 can you please give a repo link to test it please. It will help us

[souloss]

@f3ltron
The creation process is:

1. echo '# Hello VuePress' > README.md
2. vuepress build
3. Vuepress eject
4. Move 404.vue to @theme/views to modify
5. Create new enhanceApp.js to @theme
6. Route 404.vue to /404
7. Create route path:* to redirect to /404
8. Print the route and page, execute vuepress dev to view the situation

routes is:
path: "*" -> GlobalLayout.vue

repo link: https://github.com/Snile826/TestBlog.git

Thank you for your help