Expressive routing with component-based routing

[jez9999]

The current Vue router requires that Vue components simply have a <router-view></router-view> element in order to render content that is determined by the router's configuration. This decouples technologies, but it also decouples two very closely-related concerns: the components, and where/when they will be rendered. In a large-sized SPA app, you may have hundreds of components, and only a tiny percentage of them will be rendered on a given rendering because the router is deciding what should be rendered. It makes sense to have this important information included in the component templates themselves.

Vue router should add React-router style inline route elements BrowserRouter, Routes, Route, and Outlet. Thus, configuring routes could look something like this:

App.vue

<template>
    <BrowserRouter>
        <Routes>
            <Route path="/" component="Layout">
                <Route index component="Home" />
                <Route path="about" component="About" />
                <Route path="game/:gameId" component="PlayGame" />
                <Route path="highscores" component="HighScores" />
                <Route path=":pathMatch(.*)*" component="NotFound" />
            </Route>
        </Routes>
    </BrowserRouter>
</template>

Layout.vue

<template>
    <Navbar />
    <div class="container fancy-border">
        <Outlet />
    </div>
</template>

When looking at Layout.vue, one can easily see that Outlet will render the child content of the parent. To figure out what will render there, you just look at the parent component which should be immediately obvious. It may take some time to find that same route configuration in a separate router config object.

When looking at App.vue, you can immediately see what child components might get rendered, and the route that will trigger their rendering. You can add a new route configuration directly from the parent component, instead of having this information separated in a different routing configuration file. As the .vue components are already likely to be structured in such a way as to form a tree, putting the routes directly inside them avoids the redundancy of building a parallel tree of configuration in the separate router config.

I think this is a much more expressive and natural way of defining routes. Instead of seeing router-view and having to go examine a complex router configuration object, you can quickly see which components might be rendered as children of the current component, and the routes that will trigger that rendering. It tightly couples these closely-related concerns, and is well worth implementing as an option for Vue router. I've written a test site in React and Vue side-by-side, and found it much more straightforward to setup the routing in React as I could just put the routes in the components where they were to be rendered.

Route components can inherently be embedded with this setup, so routes embedded underneath a given <Route> can use relative route paths to the parent route rather than worrying about the absolute path.