时间戳

首页 > 解决方案 > vue-router：如何在多个元素中使用视图路由器？

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

问题描述

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

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

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

我的理解是路由器视图的内容将由相关组件切换到路径。

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

<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”都可以根据路径获取不同的组件。

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

标签： vue.jsvue-router

解决方案

根据官方文档，您必须使用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"
      }
    }
  ]
})

官方文档中还描述了更复杂的布局。

推荐阅读