< p >Vue-Router 是 Vue 官方推薦的一款路由管理插件，可以輕松的實現頁面之間的跳轉和參數傳遞。Vue Router 1.0 版本是在 Vue.js 1.x 之前發布的，其核心功能仍然可以支持 Vue.js 2.x，因此筆者在這里介紹一下 Vue-Router 1.0 的用法。< p >使用 Vue-Router 可以讓我們的應用更具有組織性和可維護性。在 Vue-Router 中，我們可以將組件和 URL 對應起來，每次路由跳轉時就會根據 URL 加載相應的組件。Vue-Router 1.0 的主要特點包括：< pre >- 嵌套路由和視圖 - 基于組件的路由配置 - 路由參數和查詢參數 - HTML5 History 模式和 Hash 模式 - 可以使用中間件處理請求< p >下面我們就來具體了解一下 Vue-Router 1.0 的使用。我們先從安裝和引用開始，使用 NPM 安裝 Vue-Router 命令如下：< pre >npm install vue-router@1.0 --save< p >安裝完畢之后，在入口文件中引入 Vue-Router：< pre >import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter)< p >接下來我們可以開始定義路由了。在 Vue-Router 中，路由是由一個個路由對象組成的。每個路由對象都至少應該包含兩個屬性：path 和 component。path 表示 URL 路徑，component 表示要顯示的組件。< pre >var Foo = { template: '' } var Bar = { template: '' } var router = new VueRouter({ routes: [ { path: '/foo', component: Foo }, { path: '/bar', component: Bar } ] })< p >上面的代碼定義了兩個路由，/foo 對應的組件是 Foo，/bar 對應的組件是 Bar。接下來我們需要將路由關聯到 Vue 實例上：< pre >var app = new Vue({ router }).$mount('#app')< p >在 HTML 中，我們需要加上 router-view 標簽以顯示路由對應的組件：< pre >< p >現在我們就可以通過 /foo 和 /bar 這兩個 URL 來訪問相應的組件了。如果想要定位到某個路由，可以使用 router.push 方法：< pre >router.push('/foo')< p >除了基本的路由配置，Vue-Router 中還有許多高級功能，例如嵌套路由、路由參數和查詢參數等。這些功能的使用方法可以在官方文檔中找到。總的來說，Vue-Router 是一個非常強大的路由管理插件，可以大大提高我們 Web 應用的開發效率。