Vue Router 是基于 Vue.js 的官方路由管理器,用來實現SPA(單頁應用)的導航管理,可以非常方便地實現跳轉、參數傳遞、頁面管理等功能,是 Vue.js 開發中不可或缺的一部分。下面我們將詳細說明 Vue Router 2.0 的配置方法。
要使用 Vue Router 2.0,需要在項目中安裝 Vue Router,可以使用 NPM 安裝最新版本。
npm install vue-router --save
在使用 Vue Router 2.0 前,先在 main.js 引入 Vue,并引入 Vue Router。
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
接著,定義一個 Vue Router 實例,并在該實例下定義路由。路由是由“路由映射”組成,每個“路由映射”都由一個URL路徑和一個對應的組件構成。這里我們定義了兩個“路由映射”:一個是首頁,另一個是關于頁面。
const router = new VueRouter({
routes: [
{ path: '/', component: Home },
{ path: '/about', component: About }
]
})
在實例化 Vue 時,需要把定義好的 router 實例傳入,這樣 Vue 實例才能知道路由的存在并使用路由功能。
const app = new Vue({
router
}).$mount('#app')
定義好路由后,我們需要在代碼中切換路由。使用 Vue Router 2.0 的方法是通過router-link
標簽,它會自動將 URL 解析成路由然后跳轉。在路由映射中定義了哪個 URL 路徑對應的組件,就會呈現相應的東西。
<router-link to="/">首頁</router-link>
<router-link to="/about">關于</router-link>
以上就是 Vue Router 2.0 的配置方法,對于一個簡單的頁面應用程序來說,以上的內容就足夠了。如果有更多的路由需求,Vue Router 2.0 還支持配置“嵌套路由”、“命名路由”、“動態路由”等功能,具體可查閱官方文檔。