在使用Vue開發(fā)網(wǎng)頁應(yīng)用時(shí),我們通常需要配置路由器(router)來實(shí)現(xiàn)單頁應(yīng)用(SPA)的路由。下面我們來看一下如何設(shè)置路由器。
// 引入Vue和Vue Router
import Vue from 'vue'
import VueRouter from 'vue-router'
// 在Vue中使用Vue Router
Vue.use(VueRouter)
// 定義路由組件
const Home = { template: 'Home' }
const About = { template: 'About' }
// 定義路由
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About }
]
// 創(chuàng)建路由器實(shí)例
const router = new VueRouter({
routes // 相當(dāng)于 routes: routes
})
// 創(chuàng)建Vue實(shí)例
new Vue({
router // 相當(dāng)于 router: router
}).$mount('#app')
在代碼中,我們首先引入了Vue和Vue Router,然后使用Vue.use()安裝插件。接著定義了兩個(gè)路由組件Home和About。然后定義了路由數(shù)組routes,其中每個(gè)路由對(duì)象都包括一個(gè)path和一個(gè)component屬性。最后創(chuàng)建了路由器實(shí)例和Vue實(shí)例,將路由器實(shí)例注入到Vue實(shí)例中。
在頁面模板中,我們可以通過<router-link to="/">和<router-link to="/about">鏈接不同的路由。在<router-view>組件中,路由器會(huì)根據(jù)當(dāng)前URL匹配相應(yīng)的路由組件來渲染頁面內(nèi)容。
以上是關(guān)于如何配置路由器的簡單介紹。更多高級(jí)用法請(qǐng)參考Vue Router官方文檔。