路由是現代單頁面應用程序中非常重要的概念。Vue 為我們提供了一個內置路由器,這意味著您可以使用 Vue 提供的組件系統來實現幾乎所有系統的路由實現。
在實際項目中,我們經常需要實現跳轉頁面、傳遞參數、權限控制等路由相關功能。Vue 的路由提供了方便的 API,幫助我們實現這些功能。
下面我們來看下 Vue 路由中跳轉頁面的實現:
//在組件內部: <template> <div class="home"> <h2>這是主頁頁面</h2> <button v-on:click="jumpToDetail">跳轉到詳情頁</button> </div> </template> <script> export default { methods: { jumpToDetail () { this.$router.push('/detail') } } } </script>
我們可以在組件內部通過調用 this.$router.push 方法來實現跳轉。該方法的參數是一個字符串,它表示將要跳轉的目標頁面的路徑。
如果你希望在跳轉頁面的同時傳遞一些參數,也可以通過這種方式:
this.$router.push({ name: 'user', params: { userId: 123 } })
上面的代碼中,name 表示目標頁面的名稱,在項目中需要提前定義。params 表示傳遞的參數,可以是一個簡單的字符串,也可以是一個包含多個參數的對象。
我們可以在目標頁面中獲取到這些參數,例如:
//在組件內部 <script> export default { computed: { userId () { return this.$route.params.userId } } } </script>
我們使用了 computed 計算屬性來獲取路由參數。每次參數發生變化時都會重新計算該屬性。
除了上面提到的方式之外,我們還可以在組件內部使用 $route 對象來訪問當前路由信息:
//在組件內部 <template> <div> Current route: {{ $route.path }} </div> </template>
上面的代碼中,我們使用了雙大括號語法來顯示路由信息。$route.path 返回當前路由的路徑信息。
Vue 的路由還提供了一些高級功能,例如:路由導航守衛、懶加載等。這些高級功能都是在實際項目中非常有用的。詳細的文檔請參考 Vue 官方文檔。