【vue学习】router-view

A. 一个页面使用多个router-view显示不同的内容

a.png

访问首页：localhost:8010

image.png

点击Helloworld

image.png

B. 路由嵌套和router-view

image.png

访问首页：localhost:8080

image.png

点击Helloworld或foo，右边棕色部分会替换组件

image.png

C. router-view的key属性

该段内容来自： vue-element-admin

Different router the same component vue 真实的业务场景中，这种情况很多。如：

image

我创建和编辑的页面使用的是同一个 component，默认情况下这两个页面切换时并不会触发 vue 的 created 或者 mounted 钩子，官方说你可以通过 watch $route 的变化来进行处理，但说真的还是蛮麻烦的。后来发现其实可以简单的在 router-view 上加上一个唯一的key，来保证路由切换时都会重新渲染触发钩子了。这样简单的多了。

<router-view :key="key"></router-view>
<!--
<router-view :key="$route.path"></router-view>
-->
computed: {
  key() {
    // 只要保证 key 唯一性就可以了，保证不同页面的 key 不相同
    return this.$route.fullPath
  }
 }

D. router-view & keep-alive

为了让组件数据缓存，避免每次资源重复加载（如tab标签页切换页面时，每次点完一个，回头点之前的，就会重新加载，体验真的差），因此使用了keep-alive 【不知道这点和上述说的key不同会重新触发是否矛盾，待验证...】

<!--
在这里keep-alive配合了router-view使用，
keep-alive本身是vue2.0的功能，并不是vue-router的，
所以在vue1.0版本是不支持的。
 -->
<template>
  <div>
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>
</template>


<!-- 不过一般这样写， 根据参数配置 -->

<!-- 老版本 -->
<keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>

<!-- 新版本：exclude & include-->
<keep-alive>
      <router-view exclude="detail"></router-view>
</keep-alive>

不生效案例：
网上有很多其他的情况导致的缓存不生效，这里不多阐述。如：项目中存在多个<router-view>标签，并且其中存在嵌套。那么在外层的<router-view>上加<keep-alive>标签会导致组件初始化两次，第二次初始化并没有进行缓存。所以将<keep-alive>移到内层的<router-view>上。