Vue Router

如何使用Vue Router，這是Vue應用程式中必不可少的一部分之一 簡介 在JavaScript網頁應用程式中，路由器是將目前顯示的視圖與瀏覽器地址欄內容同步的部分。 換句話說，它是當你在頁面上點擊某個元素時，使URL改變並顯示正確視圖的部分。 傳統上，網頁是基於URL構建的。當你訪問特定的URL時，會顯示特定的頁面。 隨著在瀏覽器內運行並改變使用者所見的應用程式的引入，許多應用程式打破了這種交互方式，你必須手動使用瀏覽器的History API更新URL。 當你需要將URL與應用程式中的視圖同步時，你就需要一個路由器。這是一個非常常見的需求，現代的主要框架現在都允許你進行路由管理。 Vue Router庫是Vue.js應用程式開發時的首選。Vue並不強制使用這個庫。你可以使用任何通用的路由庫，或者自己創建和History API集成，但是使用Vue Router的好處是它是官方的。 這意味著它是由維護Vue的同一群人維護的，所以你可以在框架中得到更一致的整合，並且保證它將始終與未來的版本兼容，無論是什麼版本。 安裝 Vue Router可以通過npm的vue-router包來獲取。 如果你使用script標籤引入Vue，可以使用以下方式引入Vue Router。 <script src="https://unpkg.com/vue-router"></script> unpkg.com是一個非常方便的工具，可以通過一個簡單的鏈接在瀏覽器中提供每個npm包 如果你使用Vue CLI，可以使用以下方式安裝 npm install vue-router 一旦你安裝了vue-router並使其可用，可以在你的應用程序中導入它。 你需要在vue之後導入它，並調用Vue.use(VueRouter)將其安裝在應用程序中。 import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) 在調用Vue.use()並傳遞路由器對象之後，在應用程式的任何組件中都可以訪問這些對象： this.$router是路由器對象 this.$route是當前路由對象 路由器對象 當在將Vue Router安裝到根Vue組件時，可以使用this.$router從任何組件中訪問路由器對象，它提供了許多不錯的功能。 我們可以使用以下方法導航至新路由： this.$router.push() this.$router.replace() this.$router.go() 這類似於History API的pushState，replaceState和go方法。 push()用於切換到新的路由，將新項目添加到瀏覽器的歷史記錄中。replace()類似，只是它不會將新狀態推送到歷史記錄中。 使用示例： this.$router.push('about') //命名路由，稍後查看 this.$router.push({ path: 'about' }) this.$router.push({ path: 'post', query: { post_slug: 'hello-world' } }) //使用查詢參數（post?post_slug=hello-world） this.$router.replace({ path: 'about' }) go()可以前進和後退，接受一個可能為正或負的數字來倒退或前進歷史記錄：...