什么是 <router-view>
?
<router-view>
是 Vue Router 提供的一个特殊组件。- 它的作用是作为一个占位符,用于显示当前路由对应的组件。
如何理解 "路由出口"?
- 把
<router-view>
想象成一个电影院的屏幕。你可以在这个屏幕上播放不同的电影(组件),而哪部电影正在播放则取决于电影院的播放安排(Vue Router 的路由配置)。 - 当你更改播放安排(切换路由),屏幕上的电影也会相应更换。
Vue Router 如何决定渲染哪个组件?
-
路由配置:你在 Vue Router 的配置中定义了一系列的 "播放安排"。这些配置告诉 Vue Router 当用户访问特定路径(如
/home
、/about
)时应该显示哪个组件。 -
用户访问特定路径:当用户访问一个路径(比如
/about
),Vue Router 查找其配置,找到与这个路径相匹配的组件(在这个例子中是AboutComponent
)。 -
渲染组件:找到匹配的组件后,Vue Router 在
<router-view>
的位置显示这个组件。如果用户切换到另一个路径,Vue Router 会在同一个<router-view>
位置替换为新的组件。
4. 挂载到了整个应用的入口点index.html
总结:
当用户访问不同的路由时,Vue Router 查找与当前路由路径匹配的组件,并渲染到 App.vue
中的 <router-view>
里。因此,<router-view>
中不需要手动写入任何组件标签,Vue Router 会自动处理这一切。这也是为什么在 <router-view>
标签中看不到任何东西,但你的应用却能够根据不同的路由显示不同的页面内
案例:
点击实现页面跳转
标签:Vue,--,路径,Router,组件,原理,播放,路由 From: https://www.cnblogs.com/mxleader/p/17972257