关于前端: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.