Add 404 pages for invalid links

[Ant1ng2]

There is a default 404 page when a link doesn't exist.
Here are examples in which it works with:

• https://nyc.cs.berkeley.edu/uni/lol
• https://nyc.cs.berkeley.edu/uni/games/ttt
• https://nyc.cs.berkeley.edu/uni/games/ttt/lol

The following pages do not display a 404 page when they should be:

• https://nyc.cs.berkeley.edu/uni/games/ttt/variants/lol
• https://nyc.cs.berkeley.edu/uni/games/lol/variants/
• https://nyc.cs.berkeley.edu/uni/games/lol/variants/lol

Assignment: Fix the missing 404 pages. I recommend looking at vueRouter.ts

[Penguinlay]

For insights into what is happening, those pages above where 404 page does not work are because of dynamic data. We don't know if those pages are valid or not until we load the data, say games or puzzles or their variants from the server.

There are two ways to handle it. One is with Vue Router where you would check the list of games returned from server to see if the route is valid or not. This method defeats the purpose of separations of concerns since you will be calling the API in Vue-Router.

Say you will handle the issue in the concerned component instead. Then, you should either provide conditional rendering based on server return. Here, you can either conditionally show right in the component or forward the handling to 404 page. In the latter case, you would need to update 404 page to handle those redirects.

In either cases, you somehow need to handle the unknown of whether the page does not work because of lack of games (or variants) or server fail.