Vue Router：如何实现页面路由

Vue Router 是 Vue.js 官方提供的一个用于管理应用程序中页面路由的插件。它允许您使用 URL 来控制页面之间的转换并处理浏览器历史记录。在本文中，我们将介绍如何使用 Vue Router 来实现一个简单的多页面应用。

首先，我们需要安装 Vue Router。可以通过 npm 包管理器来安装：

npm install vue-router

安装完成后，在你的 Vue 应用程序中引入 Vue Router：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

接下来，我们定义一些路由规则。在本例中，我们将定义两个路由：一个用于显示主页面，另一个用于显示关于页面：

const router = new VueRouter({
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
})

在这里，我们使用 routes 属性来定义我们的路由规则。每个规则都包含一个 path 属性和一个 component 属性。path 属性表示 URL 路径，component 属性表示该路径对应的 Vue 组件。

现在我们已经定义了我们的路由规则，接下来需要创建对应的组件。这里我们创建 Home 和 About 两个组件：

const Home = { template: '<div>这是主页</div>' }
const About = { template: '<div>这是关于页面</div>' }

最后，我们需要在我们的 Vue 实例中挂载路由：

const app = new Vue({
  router
}).$mount('#app')

在这里，我们将 router 对象传递给 Vue 实例，并使用 $mount() 方法将其挂载到 DOM 中。

现在我们已经完成了一个简单的多页面应用程序。当用户访问 / 路径时，将显示主页，而访问 /about 路径时，则显示关于页面。您可以通过点击链接或手动输入 URL 来切换页面。

总结

Vue Router 是一个非常强大的工具，可帮助您轻松地管理应用程序中的页面路由。在本文中，我们介绍了如何使用 Vue Router 来创建一个简单的多页面应用程序。虽然本例非常简单，但它展示了 Vue Router 的基本用法，并为您提供了进一步探索该插件的动力。