非常教程

Vue 2参考手册

指南 | Guide

28. Migration from 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 去除

改用组件beforeDestroydestroyed挂钩。

升级路径

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

Vue 2

Vue.js 是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

主页 https://vuejs.org/
源码 https://github.com/vuejs/vue
版本 2
发布版本 2.5.2

Vue 2目录