什么是Vue.js中的路由器视图?

unftdfkk  于 2022-12-14  发布在  Vue.js
关注(0)|答案(2)|浏览(184)

当我执行Vue快速入门并创建HelloWorld应用程序时,我看到App.vue第20行包含以下行:

<RouterView />

我找不到RouterView的任何文档。一个快速入门/教程会包含一个未记录的标记,这似乎很奇怪。我确实看到了Router-view,这是一回事吗?

u5rb5r59

u5rb5r591#

来自组件注册套管名称的Vue文档:
当用PascalCase定义组件时,在引用它的自定义元素时可以使用任意一种大小写。这意味着<my-component-name><MyComponentName>都是可以接受的。但是请注意,只有kebab大小写的名称直接在DOM中有效(即非字符串模板)。
所以<RouterView /><router-view />是一样的。

j1dl9f46

j1dl9f462#

RouterView或router-view组件用于显示与当前路由对应的组件或模板。
来源: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[];
    };
};

以下网页详细介绍了如何使用RouterView组件:如何使用Vue路由器的router-view组件
在做了一些我自己的实验后,我创建了一个vue应用程序(使用Vue Router),我发现即使我在指定的路线上,我的组件也没有显示。在将RouterView组件添加到我的App.vue模板后,我能够看到由路线指定的视图。
编辑:
我建议您阅读以下教程:Create your own Vue.js Router。在我创建了我自己的路由器之后,我现在可以理解为什么这个组件会出现了。组件将呈现路由指定的组件,因此,当路由改变时,呈现的组件也会改变。

相关问题