案例写法

路由的入口点配置

所有路由组件，要在访问后进行渲染，都必须在父级组件里带有 <router-view /> 标签。

<router-view /> 在哪里，路由组件的代码就渲染在哪个节点上。

一级路由的父级组件，当然就是 src 下的 App.vue。

常见的入口点写法

• 无公共组件的情况

<template>
  <router-view />
</template> 

• 有公共组件的情况

<template>
  <!-- 全局页头 -->
  <Header />
  
  <!-- 路由 -->
  <router-view />

  <!-- 全局页脚 -->
  <Footer />
</template>

• 带注册页，登陆页，错误页的情况

<template>
  <!-- 登录 -->
  <Login v-if="route.name === 'login'" />
  
  <!-- 注册 -->
  <Register v-else-if="route.name === 'register'" />

  <!-- 带有侧边栏的其他路由 -->
  <div v-else>
    <!-- 固定在左侧的侧边栏 -->
    <Sidebar />
    
    <!-- 路由 -->
    <router-view />
  </div>
</template>