我們經(jīng)常在網(wǎng)頁中看到一些菜單，在Vue中我們可以通過點(diǎn)擊菜單來跳轉(zhuǎn)到不同的頁面。 要創(chuàng)建一個菜單，我們可以聲明一個變量，并將其設(shè)置為菜單的數(shù)組。代碼如下： `````` 在上面的代碼中，我們首先聲明了一個名為menuList的數(shù)組，它包含三個對象，每個對象都有一個名字和一個鏈接屬性。我們使用v-for指令循環(huán)遍歷menuList數(shù)組，并使用@click指令將點(diǎn)擊事件綁定到goTo方法上。在goTo方法中，我們使用this.$router.push(path)來實(shí)現(xiàn)路由跳轉(zhuǎn)。 為了使路由能夠正常工作，我們需要在Vue中配置路由。代碼如下： ``` import Vue from 'vue' import Router from 'vue-router' import Home from './views/Home.vue' import About from './views/About.vue' import Contact from './views/Contact.vue' Vue.use(Router) export default new Router({ mode: 'history', routes: [ { path: '/', name: 'home', component: Home }, { path: '/about', name: 'about', component: About }, { path: '/contact', name: 'contact', component: Contact } ] }) ``` 在上面的代碼中，我們導(dǎo)入Vue和Vue Router庫，并使用Vue.use(Router)來安裝Vue路由。然后，我們定義了三個路由，分別對應(yīng)我們在菜單中定義的鏈接。每個路由都有一個路徑和一個組件。我們使用mode: 'history'來實(shí)現(xiàn)HTML5的歷史記錄管理。 在Vue中使用路由非常容易。我們只需要在組件中使用this.$router來訪問路由，并使用this.$router.push(path)來實(shí)現(xiàn)路由跳轉(zhuǎn)。在上面的例子中，我們通過點(diǎn)擊菜單來跳轉(zhuǎn)頁面。我們循環(huán)遍歷菜單列表，并使用@click指令將點(diǎn)擊事件綁定到goTo方法上。在goTo方法中，我們使用this.$router.push(path)來實(shí)現(xiàn)路由跳轉(zhuǎn)。