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

}

]

});

在上面的例子中，我们首先导入了我们的组件和 vue-router，然后使用 Vue.use(Router) 注册插件，最后创建了一个新的 Router 实例并将其导出。

现在我们来看一下创建路由时的一些重要概念。

路由表：路由表是由多个路由对象组成的数组。每个路由对象定义了如何匹配 URL 和组件如何渲染。

路径：路径是指匹配规则中定义的 URL 路径部分，也就是 URL 前面的 /。

组件：组件是指路由所匹配的 Vue 组件，例如，在我们的例子中，Home 和 About 都是组件。

定义路由的方式：路由可以被定义为嵌套路由（在另一个路由的 children 中定义）和布局路由（将多个组件渲染到一个页面中，用于实现布局样式）。

路径参数：路径参数是指匹配规则中的动态路径参数，例如，path: '/user/:userId'，其中的 ':userId' 即为动态路径参数。

命名路由：将路由定义为命名路由可以方便地在不同地点（组件、路由守卫等）中对其进行引用。

组件传参：在路由表中使用 props 属性可以方便传递组件所需的数据。

使用路由

现在我们已经定义了应用程序的路由了，接下来就可以在应用程序中使用它们了。要使用路由，您需要将它们添加到 Vue 实例中。通常，我们使用 Vue 的 root 实例来处理路由。在本教程中，我们将在 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" 元素中。

现在我们已经将路由添加到 Vue 实例中，我们可以使用 组件创建指向路由的链接，或使用 programmatic 创建指向路由的链接。

Router-link

组件是 vue-router 提供的组件之一，它可以方便地创建链接，链接到指定路由。它类似于 HTML 中的< a> 标签，但它可以与 vue-router 集成，并且可以使用命名路由和路径参数。

在我们的例子中，在 Home 组件中添加以下代码：

这个代码为我们创建了一个指向路由 "/about" 的链接，而且它就像一个普通的 HTML 链接一样工作。router-link 组件会根据配置的路由表生成 href 属性。

programmatic

在某些情况下，您可能需要在组件内部动态创建路由链接。在这种情况下，您可以使用 router.push() 来实现 programmatic。

以下是一个例子：

在这个例子中，我们添加了一个方法 goToAbout()，该方法使用$router.push() 方法导航到命名为 "about" 的路由。

路由钩子函数

路由钩子函数是一种用于在特定事件发生时触发的函数。在 vue-router 中有三种类型的路由钩子函数：全局、路由、组件。

全局钩子函数是在应用程序的整个生命周期中都会触发的钩子函数，而路由和组件钩子函数只会在特定的路由或组件中调用。这些钩子函数可以用于实现各种功能，例如，检查用户是否激活、加载数据等。