從 Vue Router 0.7.x 遷移

只有 Vue Router 2 是與 Vue 2 相容的，所以如果你更新了 Vue ，你也需要更新 Vue Router 。這也是我們在主文檔中將遷移路徑的詳情加入的原因。
有關使用 Vue Router 2 的完整教程，請參閱 #Vue Router 文件。

目錄

• Router 初始化

  • router.start

• Route 定義

  • router.map

  • #router.on

  • ##router.beforeEach

  • #subRoutes

  • router.redirect

  • router.alias

  • 任意的Route 屬性

  • URL 中的Query 陣列[] 語法

• Route 符合

  • #一個或更多的命名參數

• 」連結

  • #v-link

  • #v-link-active

• 程式導覽

  • router.go

• 路由選擇：Modes

  • hashbang: false

• • # #history: true

  • abstract: true
    ############路由選項：Misc##################saveScrollPosition#################root######################################################### #########transitionOnLoad###################suppressTransitionError######

• 路由掛鉤

  • activate

  • #activate

  • canActivate

  • deactivate

  • canDeactivate

  • canReuse: false

  data

$loadingRouteData
Router 初始化

##router.start

##取代不再會有一個特殊的API 用來初始化包含Vue Router 的app ，這意味著不再是：

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

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

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

升級方式

執行 

 找到 

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

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

router.on ^移除

#如果你需要在啟動的app 時透​​過程式碼產生路由，你可以動態地向路由數組推送定義來完成這個操作。舉個例子：

// 普通的路由
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 被實例化後增加新的路由，你可以把router 原來的匹配方式換成一個包括你新添的加路由的匹配方式：

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

router.beforeEach ^changed

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 ^換名

#出於Vue Router 和其他路由庫一致性的考慮，重新命名為children

router.redirect ^取代

現在用一個路由定義的選項來代替。舉個例子，你將會更新：

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

成像下面的routes配置裡定義的樣子：

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

router.alias ^取代

現在是你進行alias 操作的路由定義裡的一個選項。舉個例子，你需要在你的routes定義裡將：

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

配置這個樣子：

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

如果你需要進行多次alias 操作，你也可以使用一個陣列語法去實現：

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

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

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

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

URL 中的Query 陣列[] 語法^移除

當傳遞陣列給query 參數時，URL 語法不再是/foo?users[]=Tom&users[]=Jerry，取而代之，新語法是/foo?users=Tom&users=Jerry，此時$route.query.users 將仍舊是一個數組，不過如果在該query 中只有一個參數：/foo?users=Tom，當直接訪問該路由時，vue-router 將無法知道我們期待的users 是個陣列。因此，可以考慮新增一個計算屬性並且在每個使用$route.query.users 的地方以該計算屬性取代：

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

Route 匹配

#路由匹配現在使用path-to-regexp 這個包，這將會使得工作與之前相比更加靈活。

一個或更多的命名參數^改變

#文法稍微有些許改變，所以以/category/*tags為例，應該更新為/category/:tags 。

取代

v-link 指令已經被一個新的

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

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

v-link-active^#取代

#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>標籤將會成為真實的連結(並且可以獲得正確的跳轉)，但是啟動的類別將會被應用在外部的<li>標籤上。

程式導覽

##router.go 改變

HTML5 History API 保持一致性，router.go 已經被用來作為後退/前進導航，router. push 用來導向特殊頁面。

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

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

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

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

saveScrollPosition: true

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

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