深入解析 Vue Router：構建單頁面應用的利器
Vue.js 是一個漸進式 JavaScript 框架，常用于構建用戶界面。隨著應用的復雜度增加，路由（Routing）變得越來越重要，這就是 Vue Router 的用武之地。Vue Router 是官方提供的 Vue.js 路由管理器，用于創建單頁面應用（SPA）。本文將詳細介紹 Vue Router 的基本概念和使用方法，幫助你更好地構建和管理 Vue.js 應用的路由。
什么是 Vue Router？
Vue Router 是一個用于 Vue.js 應用的官方路由管理器，能夠使開發者輕松地在不同的視圖之間導航。它與 Vue.js 深度集成，提供了一套強大的 API 來管理應用的路由。
安裝 Vue Router
在使用 Vue Router 之前，需要先安裝它。可以使用 npm 或 yarn 進行安裝：
npm install vue-router
# 或
yarn add vue-router
配置 Vue Router
安裝完成后，可以在 Vue 應用中配置 Vue Router。以下是一個基本的配置示例：
// src/router/index.js import Vue from 'vue'; import VueRouter from 'vue-router'; import Home from '../views/Home.vue'; import About from '../views/About.vue'; Vue.use(VueRouter); const routes = [ { path: '/', name: 'Home', component: Home }, { path: '/about', name: 'About', component: About } ]; const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes }); export default router;
然后，在 Vue 實例中掛載路由：
// src/main.js import Vue from 'vue'; import App from './App.vue'; import router from './router'; Vue.config.productionTip = false; new Vue({ router, render: h => h(App) }).$mount('#app');
定義路由組件
在上述示例中，我們定義了兩個路由：Home 和 About。接下來，需要創建這些路由對應的組件。
// src/views/Home.vue <template> <div> <h1>Home</h1> </div> </template> <script> export default { name: 'Home' }; </script> // src/views/About.vue <template> <div> <h1>About</h1> </div> </template> <script> export default { name: 'About' }; </script>
使用 <router-link> 和 <router-view>
為了在應用中導航，可以使用 <router-link> 組件，它會渲染一個帶有 href 屬性的 <a> 標簽，用于導航到不同的路由。
<template>
<div id="app">
<nav>
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
</nav>
<router-view/>
</div>
</template>
<router-view> 組件是一個占位符，表示匹配到的組件將會渲染在這里。
路由模式
Vue Router 提供了兩種路由模式：hash 模式和 history 模式。
- Hash 模式：使用 URL 的哈希（
#）部分來模擬一個完整的 URL，當 URL 改變時，頁面不會重新加載。 - History 模式：利用瀏覽器的
history.pushStateAPI 來實現 URL 跳轉而無需重新加載頁面。
在上面的示例中，我們使用了 history 模式。如果你希望使用 hash 模式，可以將 mode 設置為 'hash'：
const router = new VueRouter({ mode: 'hash', base: process.env.BASE_URL, routes });
浙公網安備 33010602011771號