What is RouterView in Vue.js?

user_260516 0
Viewed 1063

When I do the Vue quickstart and it creates a HelloWorld application, I see that App.vue line 20 contains this line:

<RouterView />

I can't find any documentation for RouterView. It seems odd that a quickstart / tutorial would include an undocumented tag. I do see router-view, is that the same thing?

vue.js
2 Answers

From Vue docs for Component Registration > Name Casing:

When defining a component with PascalCase, you can use either case when referencing its custom element. That means both <my-component-name> and <MyComponentName> are acceptable. Note, however, that only kebab-case names are valid directly in the DOM (i.e. non-string templates).

So <RouterView /> is the same as <router-view />.

user_62771510

The RouterView or router-view component is used to display the current route the user is at.

Source: vue-router.d.ts

/**
 * Component to display the current route the user is at.
 */
export declare const RouterView: new () => {
    $props: AllowedComponentProps & ComponentCustomProps & VNodeProps & RouterViewProps;
    $slots: {
        default: (arg: {
            Component: VNode;
            route: RouteLocationNormalizedLoaded;
        }) => VNode[];
    };
};

Here is a webpage detailing how to use the RouterView component: How to Use Vue Router's router-view Component

After doing some of my own experimenting, I created a vue app (with Vue Router), I found that my components were not being displayed even if I was at the specified route. After adding the RouterView component to my App.vue template, I was able to see the view that was specified by the route.

user_197315590
Related