Close
升级到 Vue 3 | Vue 2 EOL

指南

从 Vue Router 0.7.x 迁移

只有 Vue Router 2 与 Vue 2 兼容，因此如果您要更新 Vue，您也必须更新 Vue Router。这就是为什么我们在主文档中包含了有关迁移路径的详细信息。有关使用新 Vue Router 的完整指南，请参阅Vue Router 文档。

路由初始化

router.start 已替换

不再有特殊的 API 用于使用 Vue Router 初始化应用程序。这意味着，您不再需要

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 被调用的示例。

任意路由属性 已替换

任意路由属性现在必须在新的 meta 属性下进行作用域，以避免与未来功能发生冲突。例如，如果您定义了

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

那么您现在将更新为

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

然后，在以后访问路由上的此属性时，您仍然会通过 meta 进行访问。例如

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

升级路径

在您的代码库上运行迁移助手以查找未在 meta 下作用域的任意路由属性的示例。

[] 查询中数组的语法 已移除

将数组传递给查询参数时，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]
    }
  }
}

路由匹配

路由匹配现在使用 path-to-regexp 作为底层实现，使其比以前灵活得多。

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

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

升级路径

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

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 指令也被 <router-link> 组件 上的 tag 属性替换。例如，您将更新此

<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 不再需要哈希邦来抓取 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 已重命名

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

升级路径

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

transitionOnLoad 已删除

现在不再需要此选项，因为 Vue 的过渡系统具有明确的 appear 过渡控制。

升级路径

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

suppressTransitionError 已删除

由于钩子简化而删除。如果您确实必须抑制过渡错误，可以使用 try…catch。

升级路径

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

路由钩子

activate 已替换

在组件中使用 beforeRouteEnter。

升级路径

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

canActivate 已替换

在路由中使用 beforeEnter。

升级路径

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

deactivate 已删除

使用组件的 beforeDestroy 或 destroyed 钩子。

升级路径

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

canDeactivate 已替换

在组件中使用 beforeRouteLeave。

升级路径

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

canReuse: false 已删除

在新 Vue Router 中不再有此用例。

升级路径

在您的代码库上运行 迁移助手 以查找 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 元属性的示例。

← 从 Vue 1.x 迁移 从 Vuex 0.6.x 迁移到 1.0 →
发现错误或想为文档做出贡献？ 在 GitHub 上编辑！ 部署在 Netlify 上。