Vue Router命名路由和命名视图

1、命名路由

对于网站开发而言，在某些时候，我们期望生成的路由 URL 地址可能会很长，在使用中可能会显得有些不便。这时候通过一个名称来标识一个路由会更方便一些，因此在 Vue Router 中，我们可以在创建 Router 实例的时候，通过在 routes 配置中给某个路由设置名称，从而方便的调用路由。如：

const router = new VueRouter({

routes: [

{

path: ‘/aaa/bbb/about’,

name: ‘about’,

component: ‘<div>about 组件</div>’ }

]

})

当我们使用命名路由之后，当需要使用 router-link 标签进行跳转时，就可以采取给 router-link 的 to 属性绑定一个对象的方式，跳转到指定的路由地址上。如：

<router-link :to=“{ name: ‘about’}”>关于我们</router-link>

2、命名视图

当我们打开一个页面时，整个页面可能是由多个 Vue 组件所构成的，例如，我们的后台管理首页可能是由 sidebar (侧导航) 、header（顶部导航）和 main (主内容）这三个 Vue 组件构成的。此时，当我们通过 Vue Router 构建路由信息时，如果一个 URL 只能对应一个 Vue 组件，整个页面肯定是无法正确显示的。

通过 router-view 标签，我们就可以指定组件渲染显示到什么位置。因此，当我们需要在一个页面上显示多个组件的时候，就需要在页面中添加多个的 router-view 标签。

那么，是不是可以通过一个路由对应多个组件（这不可以），然后按需渲染在不同的 router-view 标签上呢？默认情况下不能，当我 们 将 一 个 路 由 信 息 对 应 到 多 个 组 件 时 ， 不 管 有 多 少 个 的router-view 标 签 ， 程 序 都 会 将 第 一 个 组 件 渲 染 到 所 有 的router-view 标签上。

那怎么办呢？我们需要实现的是一个路由信息可以按照我们的需要去渲染到页面中指定的 router-view 标签上，需要通过VueRouter 命名视图的方式实现我们的需求。

命名视图，与命名路由的实现方式相似，命名视图通过在router-view 标签上设定 name 属性，之后，在构建路由与组件的对应关系时，以一种 name:component 的形式构造出一个组件对象，从而指明是在哪个 router-view 标签上加载什么组件。注意，这里在指定路由对应的组件时，使用的是 components（包含 s）属性进行配置组件

通过样式控制三个 router-view 的布局 :