從 Vue Router 0.7.x 遷移

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

Router 初始化

router.start?替換

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

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

你只需要傳一個路由屬性給 Vue 實例：

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

或者，如果你使用的是運行時構建 (runtime-only) 方式：

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

升級路徑

運行?遷移助手?找到?router.start?被調用的示例。

Route 定義

router.map?替換

路由現在被定義為一個在 router 實例里的一個?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?移除

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

// 普通的路由 var routes = [// ... ]// 動態生成的路由 marketingPages.forEach(function (page) {routes.push({path: '/marketing/' + page.slugcomponent: {extends: MarketingComponentdata: 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.on?被調用的示例。

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

升級路徑

運行?遷移助手?找到?subRoutes?選項的示例。

router.redirect?替換

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

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

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

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

升級路徑

運行?遷移助手?找到?router.redirect?被調用的示例。

router.alias?替換

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

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

配置這個樣子：

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

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

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

升級路徑

運行遷移助手找到?router.alias?被調用的示例。

任意的 Route 屬性?替換

現在任意的 route 屬性必須在新 meta 屬性的作用域內，以避免和以后的新特性發生沖突。舉個例子，如果你以前這樣定義：

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

你現在需要把它更新成：

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

如果在一個路由上訪問一個屬性，你仍然會通過 meta 。舉個例子：

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

升級路徑

運行?遷移助手?找到任意的路由不在 meta 作用域下的示例。

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.usersreturn Array.isArray(users) ? users : [users]}} }

Route 匹配

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

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

語法稍微有些許改變，所以以/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>

注意：<router-link>不支持target="_blank"屬性，如果你想打開一個新標簽頁，你必須用<a>標簽。

升級路徑

運行?遷移助手?找到?v-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>標簽上。

升級路徑

運行?遷移助手?找到?v-link-active?指令的示例

編程導航

router.go?改變

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

升級路徑

運行?遷移助手?，找到?router.go?和?router.push?指令被調用的示例。

路由選擇：Modes

hashbang: false?移除

Hashbangs 將不再為谷歌需要去爬去一個網址，所以他們將不再成為哈希策略的默認選項。

升級路徑

運行?遷移助手?找到?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?選項的示例。

路由選項：Misc

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?transition control?的存在，這個選項將不再需要。

升級路徑

運行?遷移路徑?找到?transitionOnLoad: true?選項的示例。

suppressTransitionError?移除

出于簡化鉤子的考慮被移除。如果你真的需要抑制過渡錯誤，你可以使用?try…catch?作為替代。

升級路徑

運行?遷移指令?找到?suppressTransitionError: true?選項的示例。

路由掛鉤

activate?替換

使用?beforeRouteEnter?這一組件進行替代。

升級路徑

運行?遷移路徑?找到?beforeRouteEnter?鉤子的示例。

canActivate?替換

使用beforeEnter?在路由中作為替代。

升級路徑

運行?遷移路徑?找到?canActivate?鉤子的示例。

deactivate?移除

使用beforeDestroy?或者?destroyed?鉤子作為替代。

升級路徑

運行?遷移路徑?找到?deactivate?鉤子的示例。

canDeactivate?替換

在組件中使用beforeRouteLeave?作為替代。

升級路徑

運行?遷移路徑?找到?canDeactivate?鉤子的示例。

canReuse: false?移除

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

升級路徑

運行?遷移助手?找到?canReuse: false?選項的示例。

data?替換

$route屬性是響應式的，所以你可以就使用一個 watcher 去響應路由的改變，就像這樣：

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

升級路徑

運行?遷移助手?找到?data?鉤子的示例。

$loadingRouteData?移除

定義你自己的屬性 (例如：isLoading)，然后在路由上的 watcher 中更新加載狀態。舉個例子，如果使用?axios?獲取數據：

data: function () {return {posts: [],isLoading: false,fetchError: null} }, watch: {'$route': function () {var self = thisself.isLoading = trueself.fetchData().then(function () {self.isLoading = false})} }, methods: {fetchData: function () {var self = thisreturn axios.get('/api/posts').then(function (response) {self.posts = response.data.posts}).catch(function (error) {self.fetchError = error})} }

?

from:https://cn.vuejs.org/v2/guide/migration-vue-router.html

總結

以上是生活随笔為你收集整理的Vue.js 从 Vue Router 0.7.x 迁移的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。