在Vue中,想要實現頁面之間的跳轉,我們通常需要使用Vue Router這個插件。Vue Router底層使用的是瀏覽器的History API,而封裝了一些較為方便的API供我們使用。
在 Vue Router 中,用于導航的組件需要通過 router-link 標簽來創建,而頁面的展示則需要使用 router-view 標簽。而導航操作則可以通過在JS代碼中進行跳轉,下面我們來簡單介紹一下使用Vue Router push方法進行頁面跳轉。
// 在vue實例中,通過this.$router.push進行跳轉 // 示例代碼如下: this.$router.push('/blog')
可以看到,這里我們通過 $router 實例的 push 方法來進行跳轉,而 push 方法的參數則是要跳轉的目標路由地址。這里的'/blog'可以是在路由配置中定義的路徑,也可以是一個完整的URL。比如,我們可以在一個組件中使用下面的代碼進行跳轉:
// 在組件內部,使用$router.push跳轉 // 示例代碼如下: export default { methods: { toBlog() { this.$router.push('/blog') } } }
在上述代碼中,我們通過 export default 導出了一個帶有 toBlog 方法的 Vue 組件。在這個方法內部,我們使用了之前介紹的 $router.push 方法進行頁面跳轉。需要注意的是,在Vue組件中,我們不能直接使用 $router 進行跳轉,需要使用 this.$router 的方式來調用。
我們還可以通過 $router.push 方法的第一個參數傳遞一個包含路徑和查詢參數的對象。這個對象中可以包含 path、name、query、params 等屬性,具體細節可以查看 Vue Router 官方文檔。
// 在vue實例中,通過this.$router.push進行跳轉 // 示例代碼如下: this.$router.push({ path: '/blog', query: { id: 1 } })
通過上述代碼示例,我們可以將路由參數傳遞給要跳轉的頁面。
Vue Router 還提供了 $router.replace 方法,使用方法與 $router.push 類似。它的作用就是在跳轉時不會生成一個新的歷史記錄,在瀏覽器后退時會直接返回上一個頁面,而不是返回到跳轉之前的頁面。
// 在vue實例中,通過this.$router.replace進行跳轉 // 示例代碼如下: this.$router.replace('/blog')
總結起來,Vue Router 提供了 $router.push 和 $router.replace 兩個方法進行頁面跳轉。它們的參數包含了跳轉的目標路徑、查詢參數等信息,可以很方便地進行導航操作。