Vue Router如何实现页面路由

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 核心深度集成，让构建单页面应用变得易如反掌。以下是使用 Vue Router 实现页面路由的基本步骤：

1. 安装 Vue Router： 如果你使用的是 Vue CLI 创建的项目，Vue Router 已经被包含在内。如果你需要手动安装，可以通过 npm 或 yarn 来安装：

   npm install vue-router@3
   # 或者
   yarn add vue-router@3
   

   注意：Vue 3 需要 Vue Router 4。

2. 创建路由组件： 创建一些 Vue 组件来表示不同的页面。

   // Home.vue
   <template>
     <div>Home Page</div>
   </template>
   
   // About.vue
   <template>
     <div>About Page</div>
   </template>
   

3. 定义路由： 创建一个路由配置数组，每个路由对象映射一个组件。

   import Home from './components/Home.vue';
   import About from './components/About.vue';
   
   const routes = [
     { path: '/', component: Home },
     { path: '/about', component: About }
   ];
   

4. 创建 Router 实例： 使用路由配置数组创建一个 Router 实例。

   import { createRouter, createWebHistory } from 'vue-router';
   
   const router = createRouter({
     history: createWebHistory(), // 使用 HTML5 History 模式
     routes,
   });
   

5. 在 Vue 应用中使用 Router： 将 Router 实例传递给 Vue 应用。

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

6. 在组件中使用路由： 在 Vue 组件中，你可以使用 <router-link> 组件来创建导航链接，使用 this.$route 来访问当前路由信息，或者使用编程式导航。

   <!-- 使用 <router-link> 创建导航链接 -->
   <router-link to="/">Home</router-link>
   <router-link to="/about">About</router-link>
   
   <!-- 使用编程式导航 -->
   <button @click="goToHome">Go Home</button>
   
   <script>
   export default {
     methods: {
       goToHome() {
         this.$router.push('/');
       }
     }
   }
   </script>
   

7. 路由守卫： Vue Router 提供了多种路由守卫来控制导航行为。

   router.beforeEach((to, from, next) => {
     // 在路由跳转前执行
     next();
   });
   

8. 嵌套路由和懒加载： 对于复杂的页面结构，你可以使用嵌套路由。此外，为了提高应用的性能，你可以使用懒加载来异步加载组件。

   const About = () => import('./components/About.vue');
   
   const routes = [
     { path: '/about', component: About }
   ];
   

以上就是使用 Vue Router 实现页面路由的基本步骤。根据你的应用需求，你可能还需要配置更多的路由选项，比如路由参数、查询字符串、重定向等。