VueRouter——命名视图（四）

1.命名视图

1.1 不命名是什么效果：

<template>
  <div id="app">
    <div class="header">
      <div class="nav">
        <div class="left-title" @click="handleClick">个人博客</div>
        <div class="right-nav">
          <router-link to="/">首页</router-link>
          <router-link to="/article">文章</router-link>
          <router-link to="/hot">近期热门</router-link>
          <router-link to="/hy">行业相关</router-link>
          <router-link to="/new">最新发布</router-link>
          <router-link to="/about">关于</router-link>
        </div>
      </div>
    </div>
    <div class="container">
      <router-view />
      <router-view />
      <router-view />
    </div>
  </div>
</template>

看看结果：

为什么会这样？因为三个路由视图渲染的是同一个组件。

1.2 命名视图怎么用：

router.js：

{
  path: '/',
  components: {
    default: Home,
    haveName: () => import("../components/haveName.vue"),
  },
},

app.vue：

<template>
  <div id="app">
    <div class="header">
      <div class="nav">
        <div class="left-title" @click="handleClick">个人博客</div>
        <div class="right-nav">
          <router-link to="/">首页</router-link>
          <router-link to="/article">文章</router-link>
          <router-link to="/hot">近期热门</router-link>
          <router-link to="/hy">行业相关</router-link>
          <router-link to="/new">最新发布</router-link>
          <router-link to="/about">关于</router-link>
        </div>
      </div>
    </div>
    <div class="container">
      <router-view />
      <router-view name="haveName" />
    </div>
  </div>
</template>

效果：

值得注意的是这里必须使用复数形式：

总结

需要使用命名视图的场景并不多，但需要用到的时候要会配！

---

Keep foolish, keep hungry.