Vue 前端开发之路由

Vue Router 是 Vue.js 官方的路由管理器，用于创建单页面应用（SPA）的路由。它能够帮助开发者在不同的组件之间导航，保持应用状态的同步，并且提供了许多强大而灵活的功能。

Vue Router | Vue.js 的官方路由

1. 安装 Vue Router：

   npm install vue-router
   

2. 创建两个新页面。我们将页面文件放在 views 目录下：

   # 进入源码页面
   cd src
   # 创建 views 目录
   mkdir views
   # 创建页面文件 Home.vue
   vim views/Home.vue
   

   <template>
     <div>
       <h2>Home Page</h2>
       <p>Welcome to the home page!</p>
     </div>
   </template>
   
   <script>
   export default {
     name: 'Home'
   };
   </script>
   

   创建另一个页面 About.vue：

   vim views/About.vue
   

   <template>
     <div>
       <h2>About Page</h2>
       <p>Learn more about us on this page.</p>
     </div>
   </template>
   
   <script>
   export default {
     name: 'About'
   };
   </script>
   

3. 将新页面链接插入主页面：

   vim App.vue
   

   <template>
     <h1>Hello App!</h1>
     <p>
       <strong>Current route path:</strong> {{ $route.fullPath }}
     </p>
     <nav>
       <RouterLink to="/">Go to Home</RouterLink>
       <RouterLink to="/about">Go to About</RouterLink>
     </nav>
     <main>
       <RouterView />
     </main>
   </template>
   
   <script>
   export default {
     name: 'App'
   }
   </script>
   

   使用 <router-link> 来创建导航链接，并使用 <router-view> 来显示匹配的组件。

4. 创建路由配置：

   # 创建路由配置目录
   mkdir router
   # 编辑路由配置
   vim router/index.js
   

   import { createRouter, createWebHistory } from 'vue-router';
   import Home from '../views/Home.vue';
   import About from '../views/About.vue';
   
   const routes = [
     {
       path: '/',
       name: 'Home',
       component: Home
     },
     {
       path: '/about',
       name: 'About',
       component: About
     }
   ];
   
   const router = createRouter({
     history: createWebHistory(),
     routes
   });
   
   export default router;
   

5. 在 Vue 实例中使用 Vue Router：

   vim main.js
   

   import { createApp } from 'vue';
   import App from './App.vue';
   import router from './router';
   
   createApp(App)
     .use(router)
     .mount('#app');
   

6. 启动程序：

   npm run dev