Question

我正在使用Vue UI工具生成的模板构建基于单文件的Vue应用程序。

我了解.vue文件如何定义组件的样式/结构/行为，如何将较小的组件组合为较大的组件，以及顶级“ App”组件如何将所有组件安装到HTML Div。

不过，随着用户浏览该应用程序-从登录屏幕到主屏幕再到详细信息屏幕-切换当前屏幕级别组件的公认方法是什么？

请提前

-Vuebie

Answer 1

这是一个开放式问题，所以请告诉我我在自己的项目中所做的事情。我将组件目录分为两个目录； “页面”和“常见”。（忽略“ firebase”目录，它超出了此问题的范围。）

公共目录包含可以在一个页面中使用或在多个不同页面中重新使用的组件。

例如，我的“编辑帐户”页面中使用了“帐户表单”，而我的多个页面中使用了类别栏。

pages目录中包含的组件在技术上与我的常用组件没有什么不同，但是它们代表了我网站上的完整页面。页面组件可能包含几个常见组件。

现在，常见页面和页面之间的最大区别是路由器。我将相对于主url的不同路径（这在技术上可能不是正确的描述，但希望您明白了）路由到每个页面。这是我的路由器目录中的 index.js 文件：

如您所见，我有一条路线指向我的每一页。您可以使用 router-link 标签在不同的页面组件之间导航，从而“切换当前屏幕级别的组件”（如您所说）。这些是您的客户可以使用的可点击网址，也可以包装在按钮等中。

例如，此路由器链接导航到我的主页，组件名称为“ Helloworld”。请在我的路由器的 index.js 和pages目录中查看其相应的参考，以便您可以将它们全部连接在脑海中。

<router-link class="nav-item nav-word" :to="{ name: 'HelloWorld' }">

最后，我将讨论一下App.vue文件。 App.vue就像基本组件一样，因为它的模板中包含“ router view”标记：

<router-view/>

这意味着您路由的每个页面都将放置在“路由器视图标签”的位置。即此标签将替换为页面。通常的做法是在您的标签上加上您希望在每个页面中显示的html代码。例如，我在导航栏和页脚之间放置了路由器视图标签。这样导航栏和页脚就会显示在每个页面上。