vue-router：如何在多个元素中使用视图路由器？

Posted 2023-02-23

【中文标题】vue-router：如何在多个元素中使用视图路由器？

【英文标题】：vue-router: How to use view-router in more than one element?

【发布时间】：2019-05-20 05:13:37

【问题描述】：

在模板中使用 vue-router 的一个非常简单的示例是以下代码：

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

export default new Router(
  routes: [
    
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    
  ]
)

我的理解是router-view的内容会被相关组件切换到路径。

但是，如果我的模板包含多个受路由器影响的元素。例如，

<template>
  <div id="app">
   <h1> header </h1>
    <router-view 1/>
    <h1> Inner </h1>
    <router-view 2/>
    <h1> Footer </h1>
  </div>
</template>

假设“router-view 1”和“router-view 2”都可以根据路径获取不同的组件。

在这种情况下，你会推荐我如何使用路由器？

【参考方案1】：

基于official doc，你必须使用named-views。

这样，您可以让多个router-view 为同一路径呈现不同的组件。

用你的例子，它变成：

<template>
  <div id="app">
   <h1> header </h1>
    <router-view /> // this will be the default
    <h1> Inner </h1>
    <router-view name="inner"/>
    <h1> Footer </h1>
  </div>
</template>

你的路由器看起来像：

// Don't forget your imports
const router = new VueRouter(
  routes: [
    
      path: '/',
      components: 
        default: HeaderComponent, // Will render in default router-view
        inner: InnerComponent // Will render in router-view named "inner"
      
    
  ]
)

official doc 中还描述了更复杂的布局。