Vue.js 是一個輕量級框架,它提供了一種簡單、優雅的方式來構建交互式前端應用程序。一個 Vue.js 應用程序通常包含許多不同的組件,這些組件之間需要進行通信、數據交互等操作。Vue.js 內置了一個路由系統,它可以幫助我們輕松地管理應用程序的不同路由和視圖。
在 Vue.js 中使用路由非常簡單,只需在 Vue 實例中添加一個 router 屬性,并指定一個 routes 數組,就可以定義應用程序的不同路由:
const router = new VueRouter({
routes: [
{ path: '/', component: Home },
{ path: '/about', component: About }
]
})
const app = new Vue({
router
}).$mount('#app')
在上面的代碼中,我們定義了兩個路由,分別對應路徑 / 和 /about。當用戶訪問這些路由時,它們將渲染組件 Home 和 About。
配合 Vue.js 的 CDN,我們可以像下面這樣引入 Vue.js 和 Vue Router:
<!-- Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@3.2.11/dist/vue.global.js"></script>
<!-- Vue Router -->
<script src="https://cdn.jsdelivr.net/npm/vue-router@4.0.12/dist/vue-router.global.js"></script>
通過使用CDN和Vue.js的路由,我們可以輕松地創建一個響應式的單頁應用。希望這篇文章對您在使用Vue.js的時候有所幫助。
下一篇vue實現閱卷管理