Vue Router 0.7.x에서 마이그레이션

🎜🎜경로 정의🎜🎜🎜🎜🎜🎜🎜

🎜router.map🎜🎜🎜 ^replacement🎜🎜🎜🎜🎜route는 이제 in- 라우터의 경로 옵션 🎜배열 사례 . 따라서 이러한 경로: 🎜

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

🎜는 다음과 같이 정의됩니다. 🎜

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

🎜 서로 다른 브라우저에서 객체를 순회하는 것이 동일한 속성 순서를 사용한다고 보장되지 않는다는 점을 고려하면 이 배열 구문은 보다 예측 가능한 경로 일치를 보장할 수 있습니다. 🎜

🎜🎜업그레이드 방법 🎜🎜🎜🎜Migration Assistant🎜를 실행하고 router.map의 예를 찾으세요. . 🎜🎜

router.on ^제거router.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

앱이 시작될 때 코드를 통해 경로를 생성해야 하는 경우 정의를 경로 배열에 동적으로 푸시하여 이 작업을 수행할 수 있습니다. . 예:

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

🎜라우터가 인스턴스화된 후 새 경로를 추가해야 하는 경우 라우터의 원래 일치 방법을 새로 추가된 경로를 포함하는 일치 방법으로 변경할 수 있습니다. 🎜

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

🎜업그레이드 방법 🎜🎜Migration Assistant 실행 router.on 예 찾기 부름을 받는 것. 🎜🎜🎜🎜🎜

router.beforeEach< span style="font-size: 18px;"> ^변경🎜🎜router.beforeEach는 이제 비동기식으로 작동하며 next 함수를 세 번째 인수로 사용합니다. 🎜

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

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

🎜🎜🎜

하위 경로 ^{이름 바꾸기}🎜🎜Vue Router와 다른 라우팅 라이브러리 간의 일관성을 위해 이름을 어린이🎜

🎜업그레이드 방법🎜 🎜 Migration Helper를 실행하여 subRoutes 옵션의 예를 찾으세요. . 🎜🎜🎜🎜🎜

router.redirect< span style="font-size: 18px;"> ^교체🎜🎜이제 경로 정의 옵션을 선택하세요. 예를 들어 아래 routes 구성에 정의된 대로 🎜

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

🎜를 업데이트합니다. 🎜

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

🎜업그레이드 방법🎜🎜 Migration Assistant router.redirect가 호출되는 예를 찾으세요. 🎜🎜

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

replacement이제 별칭 작업을 수행하고 있습니다라우팅 정의의 옵션입니다. 예를 들어 routes 정의에서

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

를 다음과 같이 구성해야 합니다.

saveScrollPosition: true

여러 별칭 작업을 수행해야 하는 경우 배열 구문을 사용하여 이를 수행할 수도 있습니다.

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

업그레이드 방법실행

Migration Assistant

router.alias가 호출되는 예제를 찾아보세요.

🎜🎜🎜🎜모든 경로 속성 🎜Replacement🎜🎜🎜🎜🎜이제 미래의 새로운 기능과의 충돌을 피하기 위해 모든 경로 속성이 새로운 메타 속성의 범위 내에 있어야 합니다. 예를 들어, 이전에 🎜

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

🎜와 같이 정의한 경우 이제 이를 다음과 같이 업데이트해야 합니다. 🎜

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
      })
  }
}

🎜 경로의 속성에 액세스하는 경우 여전히 메타를 전달합니다. 예: 🎜rrreee🎜🎜🎜🎜Upgrade method🎜🎜🎜🎜Run 🎜Migration Assistant🎜 메타 범위에 없는 경로의 예를 찾으세요. 🎜🎜

URL의 배열[] 구문 검색 ^Removed

배열을 쿼리 매개변수에 전달할 때 URL 구문은 더 이상 /foo?users[]=Tom&users[]=Jerry <가 아닙니다. /code> 대신 새 구문은 /foo?users=Tom&users=Jerry입니다. 그러면 $route.query.users는 여전히 배열이지만 이 쿼리에는 단 하나의 매개변수만 있습니다: /foo?users=Tom 경로에 직접 액세스할 때 vue-router는 우리가 예상하는 사용자가 배열이라는 것을 알지 못합니다. 따라서 계산된 속성을 추가하고 $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 ^替换

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

rrreee

你需要把它更新成：

rrreee

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

升级方式

运行 迁移助手 找到 v-linkrrreee

🎜

🎜경로 일치 🎜🎜

---

🎜경로 일치는 이제 를 사용합니다. path-to-regexp 패키지를 사용하면 이전보다 더 유연하게 작업할 수 있습니다. 🎜🎜🎜🎜🎜

🎜🎜하나 이상의 명명된 매개변수🎜change🎜🎜🎜🎜🎜 구문이 약간 변경되었으므로 /category/*tags를 사용하세요. 예를 들어 /category/:tags+로 업데이트해야 합니다. 🎜

🎜🎜업그레이드 방법 🎜🎜🎜🎜마이그레이션 도우미를 실행하여 더 이상 사용되지 않는 라우팅 구문의 예를 찾으세요. 🎜🎜🎜🎜🎜

🎜Link🎜🎜

---

🎜🎜🎜

🎜🎜v-link🎜🎜🎜🎜 🎜replaces 🎜🎜🎜🎜🎜🎜v-link 지시어가 새로운 <router-link> 구성 요소 지시어 교체, 이 부분 Vue 2의 구성 요소에 의해 작업이 완료되었습니다. 이는 어떤 경우에도 다음과 같은 링크가 있는 경우 🎜rrreee🎜로 업데이트해야 함을 의미합니다. 🎜rrreee🎜 참고: <router-link>는 를 지원하지 않습니다. target ="_blank" 속성을 ​​사용하려면 새 탭을 열려면 <a> 태그를 사용해야 합니다. 🎜

🎜🎜업그레이드 방법 🎜🎜🎜🎜Migration Assistant를 실행하여 v-link 명령 예. 🎜🎜

v-link-active ^교체v-link-active ^替换

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도 <router-link> 구성 요소의 태그 속성 폐기 사용함. 예를 들어,

rrreee🎜를 다음과 같이 업데이트해야 합니다: 🎜rrreee🎜<a> 태그는 실제 링크가 되지만(올바른 점프를 얻을 수 있음) 활성화되면 클래스가 적용됩니다. 외부 <li> 태그에 추가합니다. 🎜

🎜 업그레이드 방법🎜🎜 Migration Assistant 실행 찾기 v-link-active 지시문의 예 🎜🎜🎜🎜🎜

탐색 프로그래밍< /span>

---

🎜🎜🎜

router.go ^변경🎜🎜🎜 HTML5 기록 API는 일관성을 위해 router.go에서 사용되었습니다. 뒤로/앞으로 탐색, router.push는 특수 페이지를 안내하는 데 사용됩니다. 🎜

🎜 업그레이드 방법🎜🎜 Migration Assistant를 실행하고 를 찾으세요. >router.go 및 router.push 지시문이 호출되는 예. 🎜🎜

라우팅: 모드

---

hashbang: false 移除


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

升级方式

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




history: true 替换

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

rrreee

成这个写法：

rrreee

升级方式

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

abstract: true ^替换

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

rrreee

成这个写法：

rrreee

升级方式

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

🎜 ^제거🎜🎜🎜🎜🎜Google이 URL을 크롤링하는 데 더 이상 해시뱅이 필요하지 않으므로 더 이상 해싱 전략의 기본 옵션이 아닙니다. 🎜

🎜🎜업그레이드 방법 🎜🎜🎜🎜 Migration Assistant를 실행하고 hashbang: false 옵션 예시. 🎜🎜🎜🎜🎜

🎜history: true🎜🎜🎜 ^교체🎜🎜🎜🎜모든 라우팅 모델 옵션이 단일 모드 옵션. 이 글에서 🎜rrreee🎜를 업데이트해야 합니다: 🎜rrreee

🎜🎜업그레이드 방법🎜🎜🎜🎜마이그레이션 도우미 history: true 옵션의 예를 찾아보세요. 🎜🎜🎜🎜🎜

🎜abstract: true🎜🎜🎜 ^교체🎜🎜🎜🎜모든 경로 모델 옵션이 단일 모드 옵션. 이 글에서 🎜rrreee🎜를 업데이트해야 합니다: 🎜rrreee

🎜🎜업그레이드 방법🎜🎜🎜🎜마이그레이션 도우미 abstract: true 옵션의 예를 찾아보세요. 🎜🎜

라우팅 옵션: Misc

---

saveScrollPosition 替换


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

rrreee

你可以替换为：

rrreee

升级方式

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

root ^换名

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

升级方式

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

transitionOnLoad ^移除

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

升级方式

运行 迁移助手 找到 transitionOnLoad: truesaveScrollPosition

🎜 ^교체🎜🎜🎜🎜🎜기능을 수용할 수 있는 것으로 교체되었습니다scrollBehavior 옵션을 사용하므로 스크롤 동작을 각 경로에 대해서도 완전히 사용자 정의할 수 있습니다. 이렇게 하면 많은 새로운 가능성이 열리지만 단순히 기존 동작을 복사하려면 🎜rrreee🎜 다음으로 바꿀 수 있습니다. 🎜rrreee

🎜🎜업그레이드 방법🎜🎜🎜🎜실행 마이그레이션 도우미 saveScrollPosition: true 옵션의 예를 찾아보세요. 🎜🎜🎜🎜🎜

🎜root🎜🎜 🎜 ^{이름 바꾸기}🎜🎜🎜🎜 HTML의 <base> 태그는 일관성을 유지하기 위해 base로 이름이 변경되었습니다. 🎜

🎜🎜업그레이드 방법 🎜🎜🎜🎜 Migration Assistant를 실행하여 루트의 예를 찾으세요. 코드> 옵션 . 🎜🎜🎜🎜🎜

🎜transitionOnLoad🎜🎜 🎜 ^제거됨🎜🎜🎜🎜Vue의 전환 시스템으로 인해표시 전환 제어가 존재하면 이 옵션은 더 이상 필요하지 않습니다. 🎜

🎜🎜업그레이드 방법 🎜🎜🎜🎜 Migration Assistant를 실행하고 transitionOnLoad: true 옵션 예시. 🎜🎜

suppressTransitionError< Strong> ^제거됨suppressTransitionError ^移除

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

升级方式

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

路由挂钩

---

activate ^替换

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

升级方式

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

canActivate ^替换

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

升级方式

运行 迁移助手 找到 canActivate

후크를 단순화하기 위해 제거되었습니다. 전환 오류를 억제해야 한다면 시도…잡기를 대안으로 시도해 보세요.

🎜 업그레이드 방법🎜🎜 Migration Assistant 실행 찾기 억제TransitionError의 예: true 옵션. 🎜🎜🎜🎜🎜

경로 후크

---

🎜 🎜🎜

활성화 ^교체🎜🎜🎜beforeRouteEnter 이 구성요소는 대체됩니다. 🎜

🎜 업그레이드 방법🎜🎜 Migration Assistant 실행 찾기 활성화 후크의 예. 🎜🎜🎜🎜🎜

활성화 가능 ^바꾸기🎜🎜beforeEnter를 경로 재정의로 사용합니다. 🎜

🎜 업그레이드 방법🎜🎜 Migration Assistant 실행 찾기 canActivate 후크의 예. 🎜🎜

비활성화< Strong> ^제거deactivate ^移除

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

升级方式

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

canDeactivate ^替换

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

升级方式

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

canReuse: false ^移除

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

升级方式

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

data ^替换

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

rrreee

升级方式

运行 迁移助手 找到 data

사용 < code>파기 전 또는 파기 대안으로 후크.

🎜 업그레이드 방법🎜🎜 Migration Assistant 실행 찾기 비활성화 후크의 예. 🎜🎜🎜🎜🎜

canDeactivate ^교체🎜🎜 beforeRouteLeave를 대안으로 사용하세요. 🎜

🎜 업그레이드 방법🎜🎜 Migration Assistant 실행 찾기 canDeactivate 후크의 예. 🎜🎜🎜🎜🎜

canReuse: false< span style="font-size: 18px;"> ^제거🎜🎜는 더 이상 새로운 Vue 경로에서 사용되지 않습니다. 🎜

🎜 업그레이드 방법🎜🎜 Migration Assistant 실행 찾기 canReuse: false 옵션의 예. 🎜🎜🎜🎜🎜

데이터 ^replacement🎜🎜$route 속성은 반응형이므로 한 명의 감시자가 응답하는 것을 사용할 수 있습니다. 다음과 같이 라우팅 변경 사항을 적용합니다: 🎜rrreee

🎜업그레이드 방법🎜🎜마이그레이션 도우미 실행 데이터 후크의 예를 찾아보세요. 🎜🎜

$loadingRouteData ^제거$loadingRouteData ^移除

定义你自己的属性 (例如：isLoading자신만의 속성(예: isLoading)을 정의한 다음 노선 . 예를 들어 axios

를 사용하여 데이터를 가져오는 경우:

rrreee

🎜

← Vue 1.x에서 마이그레이션

Vuex 0.6.x에서 1.0으로 마이그레이션 →

제출하다

PHP 중국어 웹사이트

집강의기사Q&A사전수동다운로드찾다 APP다운로드