Vue Router是Vue.js構建的官方路由器。它能夠將組件映射到url,將參數帶入組件,并具有功能性路由,例如自動活動CSS類,嵌套路由和可編程路由。Vue Router使用了link和route-view組件鏈接和顯示路由,從而實現了路由跳轉。
在Vue中,我們可以使用link標簽進行路由跳轉。為了使用Vue Router,我們需要在Vue項目的main.js文件中安裝它。安裝方法如下:
import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) const routes = [ // 路由配置 ] const router = new VueRouter({ routes }) new Vue({ router }).$mount('#app')
在router配置中,我們可以添加路由配置項。路由配置項是一個數組,每個元素是一個對象,對象中包含path(路由路徑)和component(路由組件)屬性。這是一個很典型的Vue Router路由配置項:
const routes = [ { path: '/', component: Home }, { path: '/about', component: About } ]
對于link標簽,我們可以使用to屬性來指定跳轉路徑。to屬性可以是字符串或對象。如果是字符串,則直接指定要跳轉的路徑。如果是對象,則可以指定路徑和參數。
<!-- 字符串 -->
<router-link to="/about">About</router-link>
<!-- 對象,帶參數 -->
<router-link
:to="{ path: '/about', query: { plan: 'private' } }"
>
About
</router-link>
我們還可以在link標簽中使用props屬性,將參數傳遞給路由組件。在路由配置對象中,我們需要將props屬性設置為true才能夠使用props傳遞參數。這是一個使用props傳遞參數的例子:
const routes = [
{
path: '/user/:id',
component: User,
props: true
}
]<!-- 傳遞參數 -->
<router-link :to="{ path: '/user/123', props: { name: 'Tom' } }">
User
</router-link>
在Vue Router中,還有一些高級功能,例如嵌套路由、動態路由、編程式路由等,可以讓我們更精確地控制路由。嵌套路由允許我們在路由組件中使用子路由。動態路由允許我們以參數形式傳遞路由參數,并將其捕獲為組件屬性。編程式路由允許我們使用編程方式在代碼中控制路由。
總之,Vue Router是一個非常強大的路由器,可以幫助我們管理整個應用程序的路由,并且使得路由跳轉變得容易和自然。