前言

正如标题所示，本节我们将对编程式路由、命名路由和命名视图进行初步探索。所谓编程式导航是与前面我们使用的标签式导航相对的。编程式导航其实就是在逻辑层面进行路由的编写，这在有时是很有用的，例如路由的前进和回退。命名路由则是对某个路由进行命名，在使用路由时使用路由名代替路径，这很利于路由的维护与区分。命名视图的作用则简单些，通常的<router-view>会自动匹配同级的路由，其组件也会统统渲染在<router-view>中。但有时，我们不希望这么做。例如，我们希望一个路径就对应多个组件：拿一个基本布局来说，假设现在有一个页面，它有三个组件<Header>、<Main>、<Footer>，这三个组件共同组成了一个 Home 页。在这之前，我们有可能是使用嵌套路由的形式或者直接将这三个组件合在一个 Home 组件后再渲染成一个独立页面。但现在就可以通过一个路径匹配多个组件的方式渲染多个组件在一个路径下。

好，也许文字的说明显得苍白无力，那么直接进入代码演示环节。

编程式导航

router.push()、router.replace()、router.go()

在 Vue 实例中可以通过 $router访问路由实例，可以通过this.$router.push方法进行新路由的跳转，这些 push 的路由将会保存在路由栈中：

// 字符串
router.push('home')

// 对象
router.push({ path: 'home' })

// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})

// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

push 方法相当于在路由栈中添加路由路径，可以简单理解为跳转的意思，类似数组方法 push。除了 push 方法，还有this,router.replace方法，意为替换当前路由，类似于数组中的 splice 方法。当然，还有方法this.router.go方法，这便是路由的前进与回退，前提是路由栈中已经存在路由，可以通过传递数字参数this.router.go(-1)或this.router.go(1)的方式实现路由的后退以及前进。

// 在浏览器记录中前进一步
router.go(1)

// 后退一步记录
router.go(-1)

// 前进 3 步记录
router.go(3)

// 如果 history 记录不够用，默认失败
router.go(-100)
router.go(100)

命名路由

命名路由十分简单，例如下列路由表里的 name 便是命名路由，只有起了名字命名路由才会生效：

const routes = [
  {
    path: '/home',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
]

那么，就可以在<router-link to="Home" />中的 to 属性上直接使用路由的名字。同理，编程式导航也可以直接这么使用命名路由，名字与路径效果是一样的。

命名视图

我们在前言中说到一点命名视图，拿该例子继续说：如果我要同于路径对应多个组件，这样的代码该如何书写呢？

const router = new VueRouter({
  routes: [
    {
      path: '/',
      components: {
        default: Foo,
        a: Bar,
        b: Baz
      }
    }
  ]
})

首先在路由表中使用components而不是component，default 定义了默认组件，a 名字对应了组件 Bar，b 对应组件 Baz，那么在<router-view>该这么写：

<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>

<router-view>中定义了一个 name 属性，名字就是在路由表中的components里定义的 a 和 b，没有命名的路由视图将匹配默认组件，也就是路由表components里的 default 对应的组件 Foo。

命名视图的功能还是挺强大的，可以避免一些多余的组件建立以及注册嵌套，更加直观和易用。但 Home 页的 Header、Footer 和 Main 三个是可以写在一起的，这里为了演示方便进行了拆分。命名视图的用与不用自然取决于你或你的业务，知道命名视图的作用可以在我们需要它时快速地进行应用。

但总的来说，这三个功能里，都是有一定使用频率的，在一些公司里是强制要求使用命名路由代替路径的。而在某些场景下，我们也需要在逻辑层进行编程式导航，但相对于<router-link>的使用会少一些。命名视图则是视情况而定。

不论如何，这三个方法懂得如何运用是无害的。