## 一、概述 vue-router中有兩種方式實現導航：使用`<router-link>`創建 a 標簽點擊、借助 router 的實例方法，通過編寫代碼來實現； ## 二、`<router-link>` 這種方案與a標簽超級鏈接導航類似； ~~~ <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <div id="app"> <h1>Hello App!</h1> <p> <!-- 使用 router-link 組件來導航. --> <!-- 通過傳入 `to` 屬性指定鏈接. --> <!-- <router-link> 默認會被渲染成一個 `<a>` 標簽 --> <router-link to="/foo">Go to Foo</router-link> <router-link to="/bar">Go to Bar</router-link> </p> <!-- 路由出口 --> <!-- 路由匹配到的組件將渲染在這里 --> <router-view></router-view> </div> ~~~ ~~~ // 0. 如果使用模塊化機制編程，導入Vue和VueRouter，要調用 Vue.use(VueRouter) // 1. 定義 (路由) 組件。 // 可以從其他文件 import 進來 const Foo = { template: '<div>foo</div>' } const Bar = { template: '<div>bar</div>' } // 2. 定義路由 // 每個路由應該映射一個組件。 其中"component" 可以是 // 通過 Vue.extend() 創建的組件構造器， // 或者，只是一個組件配置對象。 // 我們晚點再討論嵌套路由。 const routes = [ { path: '/foo', component: Foo }, { path: '/bar', component: Bar } ] // 3. 創建 router 實例，然后傳 `routes` 配置 // 你還可以傳別的配置參數, 不過先這么簡單著吧。 const router = new VueRouter({ routes // (縮寫) 相當于 routes: routes }) // 4. 創建和掛載根實例。 // 記得要通過 router 配置參數注入路由， // 從而讓整個應用都有路由功能 const app = new Vue({ router }).$mount('#app') // 現在，應用已經啟動了！ ~~~ 該組件可用使用的屬性可參考：https://router.vuejs.org/zh/api/#router-link-props ## 三、編程式 通過router 的實例方法來實現； 1、`router.push(location, onComplete?, onAbort?)` 注意：在 Vue 實例內部，你可以通過`$router`訪問路由實例。因此你可以調用`this.$router.push`。想要導航到不同的 URL，則使用`router.push`方法。這個方法會向 history 棧添加一個新的記錄，所以，當用戶點擊瀏覽器后退按鈕時，則回到之前的 URL。當你點擊`<router-link>`時，這個方法會在內部調用，所以說，點擊`<router-link :to="...">`等同于調用`router.push(...)`。 | 聲明式 | 編程式 | | --- | --- | | `<router-link :to="...">` | `router.push(...)` | 該方法的參數可以是一個字符串路徑，或者一個描述地址的對象： ~~~ // 字符串 router.push('home') // 對象 router.push({ path: 'home' }) // 命名的路由 router.push({ name: 'user', params: { userId: '123' }}) // 帶查詢參數，變成 /register?plan=private router.push({ path: 'register', query: { plan: 'private' }}) ~~~ 2、`router.replace(location, onComplete?, onAbort?)` 跟`router.push`很像，唯一的不同就是，它不會向 history 添加新記錄，而是跟它的方法名一樣 —— 替換掉當前的 history 記錄。 | 聲明式 | 編程式 | | --- | --- | | `<router-link :to="..." replace>` | `router.replace(...)` | 3、`router.go(n)` 這個方法的參數是一個整數，意思是在 history 記錄中向前或者后退多少步，類似`window.history.go(n)`