Migration depuis Vue Router 0.7.x


Seul Vue Router 2 est compatible avec Vue 2, donc si vous mettez à jour Vue, vous devez également mettre à jour Vue Router. C'est pourquoi nous avons ajouté les détails du chemin de migration dans la documentation principale.
Pour un didacticiel complet sur l'utilisation de Vue Router 2, veuillez vous référer à la Documentation de Vue Router.


Répertoire

Ou, si vous utilisez la méthode d'exécution uniquement : 

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

Méthode de mise à niveau

Exécutez Assistant de migration Trouvez un exemple d'appel de router.start.


router.start 替换

不再会有一个特殊的 API 用来初始化包含 Vue Router 的 app ，这意味着不再是：

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

你只需要传一个路由属性给 Vue 实例：

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

或者，如果你使用的是运行时构建 (runtime-only) 方式：

// 普通的路由
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.start 被调用的示例。



Route 定义


router.map 替换

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

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

会以这种方式定义：

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

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

升级方式

运行 迁移助手 找到 router.map

🎜Définition de l'itinéraire🎜🎜🎜🎜🎜🎜🎜

🎜router.map🎜🎜🎜 remplacement La 🎜🎜🎜🎜🎜 route est désormais définie comme un routeur Une option routes 🎜array dans l'instance . Ainsi, ces routes : 🎜

router.beforeEach(function (to, from, next) {
  if (to.path === '/forbidden') {
    next(false)
  } else {
    next()
  }
})
🎜 seraient définies de cette façon : 🎜
router.redirect({
  '/tos': '/terms-of-service'
})
🎜 Étant donné qu'il n'est pas garanti que le parcours d'objets dans différents navigateurs utilise le même ordre de propriété, cette syntaxe de tableau peut garantir une correspondance de route plus prévisible. 🎜
🎜🎜Méthode de mise à niveau 🎜🎜🎜🎜Exécutez Migration Assistant🎜 et trouvez l'exemple de router.map être appelé . 🎜🎜


router.on Supprimerrouter.on 移除

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

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

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

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

升级方式

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


router.beforeEach changed

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

{
  path: '/admin',
  component: AdminPanel,
  alias: '/manage'
}
alias: ['/manage', '/administer', '/administrate']


subRoutes 换名

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

升级方式

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


router.redirect 替换

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

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

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

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

升级方式

运行 迁移助手 找到 router.redirect

Si vous devez générer des routes via du code au lancement de l'application, vous pouvez pousser dynamiquement la définition vers le tableau routes pour accomplir cette opération. . Par exemple : 
if (route.meta.requiresAuth) {
  // ...
}
🎜Si vous devez ajouter une nouvelle route après l'instanciation du routeur, vous pouvez modifier la méthode de correspondance d'origine du routeur en une méthode de correspondance qui inclut votre route nouvellement ajoutée : 🎜
export default {
  // ...
  computed: {
    // 此计算属性将始终是个数组
    users () {
      const users = this.$route.query.users
      return Array.isArray(users) ? users : [users]
    }
  }
}
🎜Méthode de mise à niveau 🎜🎜Exécutez Assistant de migration Recherchez router.on Exemple d'être appelé. 🎜🎜🎜🎜🎜

router.beforeEach< span style="font-size: 18px;"> modifié🎜🎜router.beforeEach fonctionne désormais de manière asynchrone et prend un fonction next comme troisième argument. 🎜

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

sous-Routes Renommer🎜🎜Par souci de cohérence entre Vue Router et les autres bibliothèques de routage, renommez-le en enfants🎜

🎜Méthode de mise à niveau🎜 🎜Exécutez Migration Helper pour trouver un exemple de l'option subRoutes . 🎜🎜🎜🎜🎜

router.redirect< span style="font-size: 18px;"> Remplacer🎜🎜Maintenant, utilisez-en un options définies par l'itinéraire à la place. Par exemple, vous mettriez à jour : 🎜

<li v-link-active>
  <a v-link="'/about'">About</a>
</li>
🎜 tel que défini dans la configuration routes ci-dessous : 🎜
<router-link tag="li" to="/about">
  <a>About</a>
</router-link>
🎜Méthode de mise à niveau🎜🎜Exécutez Assistant de migration Recherchez l'exemple où router.redirect est appelé. 🎜🎜


router.alias 替换

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

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

配置这个样子：

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

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

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

升级方式

运行 迁移助手 找到 router.alias

router.alias


remplacementMaintenant, vous effectuez des opérations d'aliasUne option dans la définition de routage. Par exemple, vous devez configurer : 

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

dans votre définition routes comme ceci : 

saveScrollPosition: true

Si vous devez effectuer plusieurs opérations d'alias, vous pouvez également utiliser une syntaxe de tableau pour y parvenir : 

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

🎜🎜🎜🎜Tout attribut de route 🎜Remplacement🎜🎜🎜🎜🎜Désormais, tout attribut de route doit être dans la portée du nouvel attribut méta pour éviter les conflits avec les futures nouvelles fonctionnalités. Par exemple, si vous l'avez précédemment défini comme ceci : 🎜
watch: {
  '$route': 'fetchData'
},
methods: {
  fetchData: function () {
    // ...
  }
}
🎜 vous devez maintenant le mettre à jour vers : 🎜
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
      })
  }
}
🎜 Si vous accédez à une propriété sur un itinéraire, vous passerez toujours la méta . Par exemple : 🎜rrreee🎜🎜🎜🎜Méthode de mise à niveau🎜🎜🎜🎜Exécuter 🎜Migration Assistant🎜 Trouvez des exemples d'itinéraires qui ne sont pas dans la méta-portée. 🎜🎜


Syntaxe du tableau de requête[] dans l'URL Supprimé

Lors du passage d'un tableau au paramètre de requête, la syntaxe de l'URL n'est plus /foo?users[]=Tom&users[]=Jerry < /code>, à la place, la nouvelle syntaxe est /foo?users=Tom&users=Jerry, alors $route.query.users sera toujours un tableau, mais s'il y a un seul paramètre dans cette requête : /foo?users=Tom En accédant directement à la route, vue-router ne saura pas que les utilisateurs attendus sont un tableau. Par conséquent, pensez à ajouter une propriété calculée et à la remplacer partout où vous utilisez $route.query.users : /foo?users[]=Tom&users[]=Jerry，取而代之，新语法是 /foo?users=Tom&users=Jerry，此时 $route.query.users 将仍旧是一个数组，不过如果在该 query 中只有一个参数：/foo?users=Tom，当直接访问该路由时，vue-router 将无法知道我们期待的 users 是个数组。因此，可以考虑添加一个计算属性并且在每个使用 $route.query.users 的地方以该计算属性代替：

rrreee


Route 匹配

路由匹配现在使用 path-to-regexp 这个包，这将会使得工作与之前相比更加灵活。


一个或者更多的命名参数 改变

语法稍微有些许改变，所以以/category/*tags为例，应该被更新为/category/:tags+。

升级方式

运行 迁移助手 找到弃用路由语法的示例。



v-link 指令已经被一个新的 <router-link> 组件指令替代，这一部分的工作已经被 Vue 2 中的组件完成。这将意味着在任何情况下，如果你拥有这样一个链接：

rrreee

你需要把它更新成：

rrreee

注意：<router-link>不支持target="_blank"属性，如果你想打开一个新标签页，你必须用<a>标签。

升级方式

运行 迁移助手 找到 v-linkrrreee

🎜

< span style="font-size : 24px;">🎜Correspondance d'itinéraire 🎜🎜

🎜La correspondance d'itinéraire utilise désormais path-to-regexp, qui rendra le travail plus flexible qu'auparavant. 🎜🎜🎜🎜🎜

🎜🎜Un ou plusieurs paramètres nommés🎜change🎜🎜🎜🎜🎜La syntaxe a légèrement changé, donc avec /category/*tagsPour Par exemple, il doit être mis à jour vers /category/:tags+. 🎜

🎜🎜Méthode de mise à niveau 🎜🎜🎜🎜Exécutez Migration Helper pour trouver des exemples de syntaxe de routage obsolète. 🎜🎜🎜🎜🎜
🎜🎜🎜
🎜🎜Méthode de mise à niveau 🎜🎜🎜🎜Exécutez l'Assistant de migration pour trouver le v-link exemple de commande. 🎜🎜


v-link-active 也因为指定了一个在 <router-link> 组件上的 tag 属性而被弃用了。举个例子，你需要更新：

rrreee

成这个写法：

rrreee

<a>标签将会成为真实的链接 (并且可以获取到正确的跳转)，但是激活的类将会被应用在外部的<li>标签上。

升级方式

运行 迁移助手 找到 v-link-active 指令的示例


编程导航


router.go 改变

为了与 HTML5 History API 保持一致性，router.go 已经被用来作为 后退/前进导航，router.push 用来导向特殊页面。

升级方式

运行 迁移助手 ，找到 router.go 和 router.push

v-link-active est également dû au fait que celui-ci est spécifié dans <router-link> attribut de balise sur le composant et était jeté utilisé. Par exemple, vous devez mettre à jour :
rrreee🎜 vers ceci : 🎜rrreee🎜<a> deviendra un vrai lien (et pourra obtenir le bon saut), mais activé La classe sera appliquée à la balise externe <li>. 🎜
🎜 Méthode de mise à niveau🎜🎜Exécutez Assistant de migration Recherchez Exemple de directive v-link-active 🎜🎜🎜🎜🎜

Navigation de programmation< /span>

🎜🎜🎜

router.go Modifier🎜🎜🎜Pour correspondre à API d'historique HTML5 pour des raisons de cohérence, router.go a utilisé comme navigation arrière/avant, router.push est utilisé pour diriger des pages spéciales. 🎜

🎜 Méthode de mise à niveau🎜🎜Exécutez Assistant de migration et recherchez le router.go et router.push. 🎜🎜


Routage : Modes


hashbang: false 移除

Hashbangs 将不再为谷歌需要去爬去一个网址，所以他们将不再成为哈希策略的默认选项。

升级方式

运行 迁移助手 找到 hashbang: false 选项的示例。


history: true 替换

所有路由模型选项将被简化成一个单个的mode 选项。你需要更新：

rrreee

成这个写法：

rrreee

升级方式

运行 迁移助手 找到 history: true 选项的示例。


abstract: true 替换

所有路由模型选项将被简化成一个单个的mode 选项。你需要更新：

rrreee

成这个写法：

rrreee

升级方式

运行 迁移助手 找到 abstract: truehashbang: false

🎜 Supprimer🎜🎜🎜🎜🎜Les hashbangs ne seront plus nécessaires pour que Google explore une URL, ils ne seront donc plus l'option par défaut pour les stratégies de hachage. 🎜
🎜🎜Méthode de mise à niveau 🎜🎜🎜🎜Exécutez Assistant de migration et trouvez le hashbang : false exemple d'option. 🎜🎜🎜🎜🎜

🎜histoire : true🎜🎜🎜 Remplacement🎜🎜🎜🎜Toutes les options de modèle d'itinéraire seront simplifiées en un seul option mode. Vous devez mettre à jour : 🎜rrreee🎜 dans cet écrit : 🎜rrreee

🎜🎜Méthode de mise à niveau🎜🎜🎜🎜Exécutez Assistant de migration Trouvez un exemple de l'option history: true. 🎜🎜🎜🎜🎜

🎜résumé : true🎜🎜🎜 Remplacement🎜🎜🎜🎜Toutes les options de modèle d'itinéraire seront simplifiées en un seul option mode. Vous devez mettre à jour : 🎜rrreee🎜 dans cet écrit : 🎜rrreee

🎜🎜Méthode de mise à niveau🎜🎜🎜🎜Exécuter Assistant de migration Trouvez un exemple de l'option abstract: true. 🎜🎜


Options de routage : Divers


saveScrollPosition 替换

它已经被替换为可以接受一个函数的 scrollBehavior 选项，所以滑动行为可以完全的被定制化处理 - 甚至为每次路由进行定制也可以满足。这将会开启很多新的可能，但是简单的复制旧的行为：

rrreee

你可以替换为：

rrreee

升级方式

运行 迁移助手 找到 saveScrollPosition: true 选项的示例。


root 换名

为了与 HTML 的<base> 标签保持一致性，重命名为 base。

升级方式

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


transitionOnLoad 移除

由于 Vue 的过渡系统 appear transition control 的存在，这个选项将不再需要。

升级方式

运行 迁移助手 找到 transitionOnLoad: truesaveScrollPosition

🎜 Remplacement🎜🎜🎜🎜🎜Il a été remplacé par un autre qui peut accepter une fonction scrollBehavior option, de sorte que le comportement de défilement peut être entièrement personnalisé - même personnalisé pour chaque itinéraire. Cela ouvrira beaucoup de nouvelles possibilités, mais pour simplement copier l'ancien comportement : 🎜rrreee🎜 vous pouvez le remplacer par : 🎜rrreee
🎜🎜Méthode de mise à niveau🎜🎜🎜🎜Exécutez Migration Helper Trouvez des exemples de l'option saveScrollPosition: true. 🎜🎜🎜🎜🎜

🎜root🎜🎜 🎜 Renommer🎜🎜🎜🎜Pour correspondre au La balise <base> du HTML est renommée base pour maintenir la cohérence. 🎜

🎜🎜Méthode de mise à niveau 🎜🎜🎜🎜Exécutez Migration Assistant pour trouver un exemple de racineoption. 🎜🎜🎜🎜🎜

🎜transitionOnLoad🎜🎜 🎜 Supprimé🎜🎜🎜🎜En raison du système de transition de Vueapparaître< / code> contrôle de transition existe, cette option n'est plus nécessaire. 🎜

🎜🎜Méthode de mise à niveau 🎜🎜🎜🎜Exécutez Assistant de migration et recherchez le transitionOnLoad : true exemple d'option. 🎜🎜


suppressTransitionError< strong> SupprimésuppressTransitionError 移除

出于简化钩子的考虑被移除。如果你真的需要抑制过渡错误，你可以使用 try…catch 作为替代。

升级方式

运行 迁移助手 找到 suppressTransitionError: true 选项的示例。


路由挂钩


activate 替换

使用 beforeRouteEnter 这一组件进行替代。

升级方式

运行 迁移助手 找到 activate 钩子的示例。


canActivate 替换

使用beforeEnter 在路由中作为替代。

升级方式

运行 迁移助手 找到 canActivate

a été supprimé pour simplifier le crochet. Si vous avez vraiment besoin de supprimer les erreurs de transition, vous pouvez utiliser essayez…catch comme alternative.
🎜 Méthode de mise à niveau🎜🎜Exécutez Assistant de migration Recherchez Exemple d'option suppressTransitionError: true. 🎜🎜🎜🎜🎜

Crochet d'itinéraire

🎜 🎜🎜

activer Remplacer🎜🎜🎜Utiliser beforeRouteEnter Ce composant est remplacé. 🎜

🎜 Méthode de mise à niveau🎜🎜Exécutez Assistant de migration Recherchez Exemple de hook activate. 🎜🎜🎜🎜🎜

canActivate Remplacer🎜🎜Utiliser beforeEnter comme remplacement dans les routes. 🎜

🎜 Méthode de mise à niveau🎜🎜Exécutez Assistant de migration Recherchez Exemple de hook canActivate. 🎜🎜


désactiver< strong> Supprimerdeactivate 移除

使用beforeDestroy 或者 destroyed 钩子作为替代。

升级方式

运行 迁移助手 找到 deactivate 钩子的示例。


canDeactivate 替换

在组件中使用beforeRouteLeave 作为替代。

升级方式

运行 迁移助手 找到 canDeactivate 钩子的示例。


canReuse: false 移除

在新的 Vue 路由中将不再被使用。

升级方式

运行 迁移助手 找到 canReuse: false 选项的示例。


data 替换

$route属性是响应式的，所以你可以就使用一个 watcher 去响应路由的改变，就像这样：

rrreee
🎜 Méthode de mise à niveau🎜🎜Exécutez Assistant de migration Recherchez Exemple de hook de désactivation. 🎜🎜🎜🎜🎜

canDeactivate Remplacement🎜🎜Utilisation dans le composant beforeRouteLeave comme alternative. 🎜

🎜 Méthode de mise à niveau🎜🎜Exécutez Assistant de migration Recherchez Exemple de hook canDeactivate. 🎜🎜🎜🎜🎜

canReuse : false< span style="font-size: 18px;"> Remove🎜🎜 ne sera plus utilisé dans la nouvelle route Vue. 🎜

🎜 Méthode de mise à niveau🎜🎜Exécutez Assistant de migration Recherchez Exemple d'option canReuse: false. 🎜🎜🎜🎜🎜

data remplacement🎜🎜L'attribut $route est réactif, vous ne pouvez donc utiliser qu'un seul observateur pour répondre aux changements de routage, comme ceci : 🎜rrreee

🎜Méthode de mise à niveau🎜🎜Exécutez Assistant de migration Trouvez des exemples de hooks data. 🎜🎜


$loadingRouteData Supprimer$loadingRouteData 移除

定义你自己的属性 (例如：isLoadingDéfinissez vos propres propriétés (par exemple : isLoading), puis mettez à jour l'état de chargement dans l'observateur sur le itinéraire . Par exemple, si vous utilisez axios

pour obtenir des données :

rrreee

🎜
←
→

Site Web PHP chinois

MaisonMaisonCoursCoursArticleArticleQuestions et réponsesQuestions et réponsesDictionnaireDictionnaireManuelManuelTéléchargerTéléchargerrechercherechercheAPPTélécharger APPTélécharger