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