vue-router 详解

Vue.js 是一种非常流行的前端框架，但是要创建一个具有多个页面的应用程序，就需要使用 vue-router。vue-router 可以帮助我们管理应用程序中的路由，从而使用户能够访问应用程序的各个部分。在这篇文章中，我们将详细介绍 vue-router，让您理解其工作原理、使用方法以及如何在应用程序中实现路由。

什么是 vue-router

vue-router 是一个官方的 Vue.js 插件，它允许开发人员在应用程序中实现路由。路由可以看作是前端应用程序中的页面，其可以是任何东西，例如登录、主页、个人设置等等。实现路由可以让应用程序具有页面路由功能，从而能够实现多页面之间切换，以及 URL 中的参数控制页面的显示。

安装 vue-router

安装 vue-router 模块的方法跟其他模块基本一致，比如使用 cnpm、npm、yarn 等。我们来看一下如何使用 npm 安装 vue-router：

npm install vue-router --save

创建路由

要使用 vue-router，您需要首先定义应用程序中的路由。因此，在此之前，我们需要定义路由及其组件。Vue.js 提供了两种创建组件的方式：作为 Vue.extend() 的选项，或者使用单文件组件。在此，我们使用单文件组件来创建路由所需的组件。

在 src 文件夹中创建一个名为 "views" 的文件夹，并在其中创建两个组件：Home.vue 和 About.vue。这些文件的结构应该类似于以下示例：

views/

-- Home.vue

-- About.vue

您可以使用以下代码作为这些文件的模板。

Home.vue：

——

About.vue：

——

现在我们已经有了我们的组件，接下来我们需要定义我们的路由。在 src 文件夹中创建一个名为 "router.js" 的文件，并使用以下代码来导入上面创建的组件和 vue-router：

import Vue from "vue";

import Router from "vue-router";

import Home from "./views/Home.vue";

import About from "./views/About.vue";

Vue.use(Router);

export default new Router({

routes: [

{

path: "/",

name: "home",

component: Home

},

{

path: "/about",

name: "about",

component: About