vue router-view解析

在vue项目中，我们经常会见到router-view标签，在实际渲染后的页面里并不存在router-view，是一个有路由占位符功能的存在，可以在指定位置渲染出指定的组件。

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>

按照官方文档的说法，组件是一个functional组件，渲染路径匹配到的视图组件。渲染的组件还可以内嵌自己的，根据嵌套路径，渲染嵌套组件。
其他属性（非router-view使用的属性）都直接传给渲染的组件，很多时候，每个路由的数据都是包含在路由参数中。

因为它也是个组件，所以可以配合 和 使用。如果两个结合一起用，要确保在内层使用 ：

<transition>
  <keep-alive>
    <router-view></router-view>
  </keep-alive>
</transition>

Props

name

类型: string

默认值: “default”

如果 设置了名称，则会渲染对应的路由配置中 components 下的相应组件。

对应router：

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