代码之家 › 专栏 › 技术社区 › CrazySynthax

vue路由器:如何在多个元素中使用view router?

vue-router vue.js

CrazySynthax · 技术社区 · 6 年前

<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>

假设“路由器视图1”和“路由器视图2”都可以根据路径获得不同的组件。

1 回复 | 直到 6 年前

Toodoo 6 年前

基于 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 .

推荐文章

Jimmy Kiarie · 路由之前的Vue js

6 年前

angelique000 · 对于非常大的Web应用程序,Vue路由器的最佳实践是什么?

6 年前

Felipe Paulo · Vuejs未渲染子路由

6 年前

angelique000 · 如何在Vue组件中加载OpenSeadragon组件

6 年前

dsky · 保持Vue状态

6 年前

Paul Renshaw · Vue。Firebase托管上的js SPA,使用通配符重写Firebase云函数

6 年前

josefdev · 如何在Vue中声明被动属性。js公司

7 年前

ChadQi · 刷新浏览器导致文件路径更改

7 年前

DarkFenix · 访问存储或获取程序的状态_WEBPACK\u IMPORTED\u MODULE\u 3\u store\uuuuuuuuuuuu。a、调度不是一项功能

7 年前

Chad Carter · Vue测试UTIL未知自定义元素:<路由器链接>

7 年前