在Vue中,路由是指通過瀏覽器地址欄的URL地址來訪問不同的頁面。跳轉(zhuǎn)路由是指在頁面中點擊某個鏈接或執(zhí)行某個操作后,通過編程方式跳轉(zhuǎn)到指定的路由地址。Vue提供了一組非常簡單易用的API來實現(xiàn)跳轉(zhuǎn)路由,這就是Vue Router。
Vue Router通過$router對象來進(jìn)行路由跳轉(zhuǎn)。要使用它首先要在組件中引入Vue Router:
import VueRouter from 'vue-router' Vue.use(VueRouter)
然后我們需要配置路由,通過創(chuàng)建一個VueRouter實例。我們可以在其中定義不同的路由地址和對應(yīng)的組件。
const router = new VueRouter({ routes: [ {path: '/home', component: Home}, {path: '/user', component: User}, {path: '/about', component: About} ] })
其中routes數(shù)組定義了各個路由地址和對應(yīng)的組件。這里的Home、User和About是組件名,需要在組件中定義。
在定義好路由之后,我們就可以在組件中使用$router對象進(jìn)行跳轉(zhuǎn)。使用$router.push方法可以實現(xiàn)路由跳轉(zhuǎn),比如:
this.$router.push('/home')
這里的'/home'就是我們在路由配置中定義的路徑,也是要跳轉(zhuǎn)的頁面地址。我們可以在跳轉(zhuǎn)路由時同時攜帶一些參數(shù),這些參數(shù)會在目標(biāo)組件中通過$route對象訪問:
this.$router.push({ path: '/user', query: { userId: 123 } })
這里通過query屬性攜帶了一個userId參數(shù),值為123。在目標(biāo)組件中可以通過this.$route.query.userId訪問到這個參數(shù)。
在某些場景下,我們需要通過編程方式打開一個新的瀏覽器窗口或標(biāo)簽頁,并跳轉(zhuǎn)到指定的路由地址。在Vue Router中,可以使用$router.resolve方法來生成目標(biāo)URL地址。例如:
const resolved = this.$router.resolve('/about') window.open(resolved.href, '_blank')
這里使用$router.resolve方法生成了一個跳轉(zhuǎn)地址,并通過window.open方法在新的瀏覽器窗口中打開該地址。
Vue Router還提供了一些其他的API,如$router.replace方法可以在不產(chǎn)生歷史記錄的情況下進(jìn)行路由跳轉(zhuǎn),在一些特殊場景下比較適用。
總之,在Vue中實現(xiàn)路由跳轉(zhuǎn)非常簡單直觀,通過$router對象就可以訪問到所有路由相關(guān)的API。通過配置好路由表,我們就可以方便地在組件中實現(xiàn)各種跳轉(zhuǎn)操作。使用Vue Router,我們可以更方便地構(gòu)建復(fù)雜的單頁面應(yīng)用。