命名视图：
如果我们的页面上面有2个部分，在不同的路由下面，它都要显示不同的东西。怎么做呢？
这个时候，我们可以在同一个组件内部，使用2个不同的 <router-view />，然后我们给这个 <router-view /> 命一个名。
对于不同名字的 <router-view />，我们在不同的路由下，可以给它有不同的组件，如下图：
如果我们有2个 <router-view /> 的情况，router 的配置文件里面，就需要改成 components : { ... }。
如果我们的 <router-view /> 是没有名字的，那就是 default 所对应的组件。
有名字的，就是对应名字的那个组件。
这就是我们在同一个组件内，在不同的路由下面，有不同的 <router-view /> 情况下，我们可以这么去做。
那这种情况，适用于什么时候呢？就是比如说我们传统的三栏布局，上面有个顶部栏，左侧一个菜单栏，中间是显示的内容。
如果上面的顶部栏，点了一个东西之后，我们左侧的菜单栏要进行一个切换了。
那这种时候我们就可以使用这种方法，来给我们左侧的菜单栏也加一个 <router-view />。
根据不同的路由，它可以去切换不同的菜单。
虽然用的不是很多，但是相对来说比较灵活，大家要先知道有这么一个用法。
路由的导航守卫：
路由的导航守卫非常多，我们先从全局的开始讲起：
首先在 main.js 里面进行一个守卫的注册。
beforeEach：是在路由进入之前触发，也就是我们每次路由守卫进行跳转的时候，都会触发。必须执行 next() 之后，我们的路由才会真正的跳转。如果我们不执行这个函数，那么它是不会跳转到下个路由的。
beforeResolve：它和 beforeEach 差不多，但是它们执行的时机会不一样。
afterEach：就是每次导航都跳转了之后，它才会被触发。既然都已经跳转了，所以参数中也就没有 next 了。
我们可以看到上图，它们三个的执行顺序。我们每次路由跳转的时候，它们三个都会被触发。
这就是全局的导航守卫。那么它们的用途是什么呢？
beforeEach：我们可以在这里面进行一些数据的校验，或者路由跳转时候的验证。比如：
我们可以看到：进入 /login 后，再点击 /hello，我们发现路由就不跳转了。
因为我们没有执行 next()，所以我们在怎么点，路由它都是不会跳转的。
但是我们的 beforeEach 还是触发了，而 beforeResolve 和 afterEach 都没有被触发。
因为在 beforeEach 里面已经被阻止掉了，没有 next()。
那么这种场景我们应用到哪里呢？
比如说，我们要去验证一些页面是需要用户登录才能去显示的，那这个验证我们就可以放在 beforeEach 里面去做。
然后我们发现，如果他是没有登录的，我们可以通过 next('/login')，直接让他跳转到 /login 页面去登录。
而不用进入到我们实际的页面之后，然后在去判断，然后再去跳转，这样的话逻辑就会变的很复杂。
而且每个页面你都需要去判断，并且都要去加那部分的逻辑。
我们可以直接通过 next 来进行一些路由直接的跳转，而且你这边写的内容，不仅仅是说一个字符串，你也可以写一个对象。
然后传入的是跟我们在 router-link 上面去声明的那些 props 是一模一样的东西。比如：
所以，你在 next 里面能传的所有东西，就是跟我们 $route 上面可以定义的所有东西，都是一样的。
同样的，beforeResolve 用处也差不多，我们这里就不详细的讲了。
