Route 定义

router.map 替换

路由现在被定义为一个在 router 实例里的一个 routes 选项数组。所以这些路由：

router.map({
  '/foo': {
    component: Foo
  },
  '/bar': {
    component: Bar
  }
})

会以这种方式定义：

var router = new VueRouter({
  routes: [
    { path: '/foo', component: Foo },
    { path: '/bar', component: Bar }
  ]
})

考虑到不同浏览器中遍历对象不能保证会使用相同的 property 顺序，这种数组的语法可以保证更多可预测的路由匹配。

升级路径

运行 迁移助手 找到 router.map 被调用的示例。

router.on 移除

如果你需要在启动的 app 时通过代码生成路由，你可以动态地向路由数组推送定义来完成这个操作。举个例子：

// 普通的路由
var routes = [
  // ...
]
// 动态生成的路由
marketingPages.forEach(function (page) {
  routes.push({
    path: '/marketing/' + page.slug
    component: {
      extends: MarketingComponent
      data: function () {
        return { page: page }
      }
    }
  })
})
var router = new Router({
  routes: routes
})

如果你需要在 router 被实例化后增加新的路由，你可以把 router 原来的匹配方式换成一个包括你新添的加路由的匹配方式：

router.match = createMatcher(
  [{
    path: '/my/new/path',
    component: MyComponent
  }].concat(router.options.routes)
)

升级路径

运行 迁移助手 找到 router.on 被调用的示例。

router.beforeEach changed

router.beforeEach 现在是异步工作的，并且携带一个 next 函数作为其第三个参数。

router.beforeEach(function (transition) {
  if (transition.to.path === '/forbidden') {
    transition.abort()
  } else {
    transition.next()
  }
})

router.beforeEach(function (to, from, next) {
  if (to.path === '/forbidden') {
    next(false)
  } else {
    next()
  }
})

subRoutes 换名

出于 Vue Router 和其他路由库一致性的考虑，重命名为children

升级路径

运行 迁移助手 找到 subRoutes 选项的示例。

router.redirect 替换

现在用一个路由定义的选项作为代替。举个例子，你将会更新：

router.redirect({
  '/tos': '/terms-of-service'
})

成像下面的routes配置里定义的样子：

{
  path: '/tos',
  redirect: '/terms-of-service'
}

升级路径

运行 迁移助手 找到 router.redirect 被调用的示例。

router.alias 替换

现在是你进行 alias 操作的路由定义里的一个选项。举个例子，你需要在你的routes定义里将：

router.alias({
  '/manage': '/admin'
})

配置这个样子：

{
  path: '/admin',
  component: AdminPanel,
  alias: '/manage'
}

如果你需要进行多次 alias 操作，你也可以使用一个数组语法去实现：

alias: ['/manage', '/administer', '/administrate']

升级路径

运行迁移助手找到 router.alias 被调用的示例。

任意的 Route 属性 替换

现在任意的 route 属性必须在新 meta 属性的作用域内，以避免和以后的新特性发生冲突。举个例子，如果你以前这样定义：

'/admin': {
  component: AdminPanel,
  requiresAuth: true
}

你现在需要把它更新成：

{
  path: '/admin',
  component: AdminPanel,
  meta: {
    requiresAuth: true
  }
}

如果在一个路由上访问一个属性，你仍然会通过 meta 。举个例子：

if (route.meta.requiresAuth) {
  // ...
}

升级路径

运行 迁移助手 找到任意的路由不在 meta 作用域下的示例。

URL 中的 Query 数组 [] 语法 移除

当传递数组给 query 参数时，URL 语法不再是 /foo?users[]=Tom&users[]=Jerry，取而代之，新语法是 /foo?users=Tom&users=Jerry，此时 $route.query.users 将仍旧是一个数组，不过如果在该 query 中只有一个参数：/foo?users=Tom，当直接访问该路由时，vue-router 将无法知道我们期待的 users 是个数组。因此，可以考虑添加一个计算属性并且在每个使用 $route.query.users 的地方以该计算属性代替：

export default {
  // ...
  computed: {
    // 此计算属性将始终是个数组
    users () {
      const users = this.$route.query.users
      return Array.isArray(users) ? users : [users]
    }
  }
}