Vue是現今最火熱的前端MVVM框架之一,可謂是前端開發不可或缺的利器之一。Vue應用的頁面切換是一個非常重要的功能,本文將會介紹使用Vue實現App頁面切換的方法。
首先,我們需要在Vue項目中安裝 `vue-router`。在 `main.js` 中,我們需要導入 `vue-router` 并使用它。
// main.js文件 import VueRouter from 'vue-router' import Vue from 'vue' Vue.use(VueRouter) const routes = [ {path: '/', component: Home}, {path: '/about', component: About}, {path: '/contact', component: Contact}, ] const router = new VueRouter({ routes }) new Vue({ el: '#app', router, render: h =>h(App) })
在 `routes` 中,我們定義了三個路由,分別對應著首頁,關于我們和聯系我們三個頁面。在 `new VueRouter()` 中,我們傳入了 `routes`,即告訴VueRouter我們需要哪些路由,VueRouter會根據我們的配置,自動為我們生成路由。我們還需要將 `router` 傳入 `new Vue()` 中,這樣子才能在整個應用程序中使用路由。
在 `App.vue` 中,我們需要為每個路由設置對應的組件。這里我們可以使用 `router-view` 組件來展示當前路由對應的組件。
首頁 關于我們 聯系我們
在上面的代碼中,我們使用 `router-link` 標簽來鏈接到路由。當我們點擊一個鏈接時,Vue會自動切換到對應的路由,并加載對應的組件。`router-view` 組件會在切換路由時自動刷新,并展示對應的組件。
至此,我們已經成功實現了VueApp頁面切換的功能。當我們在應用程序中切換路由時,Vue會自動加載對應的組件,并刷新路由。
上一篇go結構體后跟json
下一篇vue app路由