28. Migration from Vue Router 0.7.x（从Vue Router 0.7.x的迁移）

从Vue Router 0.7.x迁移

只有Vue Router 2与Vue 2兼容，所以如果你正在更新Vue，你还必须更新Vue Router。这就是为什么我们在主文档中包含了迁移路径的细节。有关使用新Vue路由器的完整指南，请参阅Vue路由器文档。

路由器初始化

router.start 更换

Vue Router不再需要特殊的API来初始化应用程序。这意味着要代替：

router.start{
  template: '<router-view></router-view>'
}, '#app')

您将路由器属性传递给Vue实例：

new Vue{
  el: '#app',
  router: router,
  template: '<router-view></router-view>'
})

或者，如果您使用Vue的仅运行时版本：

new Vue{
  el: '#app',
  router: router,
  render: h => h('router-view')
})

升级路径

在代码库上运行迁移助手以查找router.start被调用的示例。

路由定义

router.map 更换

现在路由被定义为路由器实例化routes选项上的数组。所以这些路线例如：

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

反而会被定义为：

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

数组语法允许更多可预测的路由匹配，因为遍历一个对象并不保证在浏览器中使用相同的键顺序。

升级路径

在代码库上运行迁移助手以查找router.map被调用的示例。

router.on 去除

如果您需要在启动应用程序时以编程方式生成路由，可以通过将定义动态推送到路由阵列来实现。例如：

// Normal base routes
var routes = [
  // ...
]

// Dynamically generated 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.match = createMatcher(
  [{
    path: '/my/new/path',
    component: MyComponent
  }].concat(router.options.routes)
)

升级路径

在代码库上运行迁移助手以查找router.on被调用的示例。

router.beforeEach 更换

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 改名

children在Vue和其他路由库中重命名为一致。

升级路径

在代码库上运行迁移助手以查找subRoutes选项的示例。

router.redirect 更换

这现在是路由定义上的一个选项。因此，例如，您将更新：

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

在你的routes配置中定义如下：

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

升级路径

在代码库上运行迁移助手以查找router.redirect被调用的示例。

router.alias 更换

这现在是您想要别名的路线定义的一个选项。因此，例如，您将更新：

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

在你的routes配置中定义如下：

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

如果您需要多个别名，则还可以使用数组语法：

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

升级路径

在代码库上运行迁移助手以查找router.alias被调用的示例。

任意路由属性被替换

现在必须将任意路由属性限定在新的元属性下，以避免与未来功能发生冲突。例如，如果你已经定义了：

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

然后，您现在将其更新为：

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

然后，当稍后在路线上访问此属性时，您仍然会通过meta。例如：

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

升级路径

在您的代码库上运行迁移帮助程序，以查找不在元范围内的任意路由属性的示例。

[]查询中数组的语法被删除

当将数组传递给查询参数时，QueryString语法不再/foo?users[]=Tom&users[]=Jerry，而是新的语法/foo?users=Tom&users=Jerry。在内部，它$route.query.users仍然是一个数组，但是如果查询中只有一个参数：/foo?users=Tom当直接访问这个路由时，路由器无法知道我们是否希望users是一个数组。因此，请考虑添加一个计算属性并用$route.query.users它替换每个引用：

export default {
  // ...
  computed: {
    // users will always be an array
    users () {
      const users = this.$route.query.users
      return Array.isArray(users) ? users : [users]
    }
  }
}

路线匹配

路径匹配现在使用路径到正则表达式，使其比以前更加灵活。

一个或多个命名参数已更改

语法略有改变，/category/*tags例如，应该更新为/category/:tags+。

升级路径

在代码库上运行迁移助手以查找过时路由语法的示例。

链接

v-link 更换

该v-link指令已被替换为一个新<router-link>组件，因为这种工作现在完全是Vue 2中组件的责任。这意味着无论何时您有像这样的链接：

<a v-link="'/about'">About</a>

你需要像这样更新它：

<router-link to="/about">About</router-link>

请注意，target="_blank"由于不支持<router-link>，所以如果您需要在新选项卡中打开链接，则必须<a>改用。

升级路径

在您的代码库上运行迁移助手以查找v-link指令的示例。

v-link-active 更换

该v-link-active指令也被组件tag上的<router-link>属性取代。举个例子，你会更新这个：

<li v-link-active>
  <a v-link="'/about'">About</a>
</li>

对此：

<router-link tag="li" to="/about">
  <a>About</a>
</router-link>

这<a>将是实际的链接（并将获得正确的href），但活动类将应用于外部<li>。

升级路径

在您的代码库上运行迁移助手以查找v-link-active指令的示例。

程序导航

router.go 更改

为了与HTML5 History API保持一致，router.go现在仅用于后退/前进导航，而router.push用于导航到特定页面。

升级路径

在您的代码库上运行迁移帮助程序以查找router.go正在使用的示例，router.push而不是在哪里使用。

路由器选项：模式

hashbang: false 去除

Google不再需要Hashbang来抓取URL，因此它们不再是哈希策略的默认（或者甚至是选项）。

升级路径

在代码库上运行迁移助手以查找hashbang: false选项的示例。

history: true 更换

所有路由模式选项都被压缩为一个mode选项。更新：

var router = new VueRouter{
  history: 'true'
})

至：

var router = new VueRouter{
  mode: 'history'
})

升级路径

在代码库上运行迁移助手以查找history: true选项的示例。

abstract: true 更换

所有路由模式选项都被压缩为一个mode选项。更新：

var router = new VueRouter{
  abstract: 'true'
})

至：

var router = new VueRouter{
  mode: 'abstract'
})

升级路径

在代码库上运行迁移助手以查找abstract: true选项的示例。

路线选项：杂项

saveScrollPosition 更换

这已被替换为接受函数的scrollBehavior选项，以便滚动行为可以完全自定义 - 即使是每个路由。这打开了许多新的可能性，但要复制以下的旧行为：

saveScrollPosition: true

您可以将其替换为：

scrollBehavior: function (to, from, savedPosition) {
  return savedPosition || { x: 0, y: 0 }
}

升级路径

在代码库上运行迁移助手以查找saveScrollPosition: true选项的示例。

root 修改名字

重命名base为与HTML <base>元素保持一致。

升级路径

在代码库上运行迁移助手以查找root选项的示例。

transitionOnLoad 去除

现在Vue的转换系统具有明确的appear转换控制，此选项不再是必需的。

升级路径

在代码库上运行迁移助手以查找transitionOnLoad: true选项的示例。

suppressTransitionError 去除

由于钩的简化而被删除。如果您确实必须禁止转换错误，则可以使用try...catch代替。

升级路径

在代码库上运行迁移助手以查找suppressTransitionError: true选项的示例。

路线钩

activate 更换

beforeRouteEnter改为在组件中使用。

升级路径

在您的代码库上运行迁移助手以查找beforeRouteEnter挂钩的示例。

canActivate 更换

beforeEnter改为在路线中使用。

升级路径

在您的代码库上运行迁移助手以查找canActivate挂钩的示例。

deactivate 去除

改用组件beforeDestroy或destroyed挂钩。

升级路径

在您的代码库上运行迁移助手以查找deactivate挂钩的示例。

canDeactivate 更换

beforeRouteLeave改为在组件中使用。

升级路径

在您的代码库上运行迁移助手以查找canDeactivate挂钩的示例。

canReuse: false 去除

在新的Vue路由器中不再有这种用例。

升级路径

在代码库上运行迁移助手以查找canReuse: false选项的示例。

data 更换

该$route属性现在是被动的，因此您可以使用观察者对路由更改作出反应，如下所示：

watch: {
  '$route': 'fetchData'
},
methods: {
  fetchData: function () {
    // ...
  }
}

升级路径

在您的代码库上运行迁移助手以查找data挂钩的示例。

$loadingRouteData 去除

定义你自己的属性（例如isLoading），然后更新路由上的观察者的加载状态。例如，如果使用axios获取数据：

data: function () {
  return {
    posts: [],
    isLoading: false,
    fetchError: null
  }
},
watch: {
  '$route': function () {
    var self = this
    self.isLoading = true
    self.fetchData().then(function () {
      self.isLoading = false
    })
  }
},
methods: {
  fetchData: function () {
    var self = this
    return axios.get('/api/posts')
      .then(function (response) {
        self.posts = response.data.posts
      })
      .catch(function (error) {
        self.fetchError = error
      })
  }
}

升级路径

在您的代码库上运行迁移助手以查找$loadingRouteData元属性的示例。