在 Vue.js 中，路由是一个非常重要的概念。它允许我们创建单页应用（SPA），即在页面不刷新的情况下，根据用户的操作动态改变页面内容，实现良好的用户体验。下面，本文将详细介绍 Vue.js 中配置路由的方法，以及其深度和学习指导。
路由的基本概念和作用
路由是指通过 URL 地址来切换页面的技术，其基本概念包括路由路径和组件映射。路由路径是 URL 路径（Hash 或 HTML5 历史路由）和对应的组件之间的映射关系。组件是我们要展示的内容，它可以是一个页面，也可以是一个页面上的一部分。
路由的作用是：
- 将页面独立成一个个组件，实现组件的复用和单独维护；
- 根据用户的操作，通过 URL 来切换页面内容；
- 根据不同的路由路径，展示对应的组件。
Vue.js 中路由的配置方法
1. 安装 vue-router
在使用 Vue.js 中的路由之前，我们需要先安装 vue-router。可以通过 npm 指令进行安装：
npm install vue-router --save
2. 引入和使用 vue-router
安装好 vue-router 之后，我们需要在 main.js 中引入和注册：
import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter)
3. 定义路由
在使用路由之前，我们需要先定义路由。在 src 目录下新建一个 router 目录，再在该目录下新建 index.js 文件，用于配置路由。然后，在 index.js 文件中引用需要切换的组件：
-- -------------------- ---- ------- ------ --- ---- ----- ------ --------- ---- ------------ ------ ---- ---- ------------------- ------ ----- ---- -------------------- ------------------ ----- ------ - - - ----- ---- ---------- ---- -- - ----- --------- ---------- ----- -- - ----- ------ - --- ----------- ------- -- ------ ------- ------
在上面的代码中，我们定义了两个路由路径：'/' 和 '/about'，分别对应 Home 组件和 About 组件。
4. 注册路由
在 main.js 中注册路由：
-- -------------------- ---- ------- ------ --- ---- ----- ------ --- ---- ----------- ------ ------ ---- ---------- ------------------------ - ----- --- ----- ------- ------- - -- ------- -----------------
5. 添加路由出口
在 App.vue 组件中做以下修改：
<template>
<div id="app">
<router-view></router-view>
</div>
</template>这里用路由出口来显示当前路由匹配到的组件，这样在不同的路由路径下就能展示不同的组件。
到这里，我们就完成了 vue-router 的配置！
示例代码
完整的源码示例：
-- -------------------- ---- ------- -- --------------- ------ --- ---- ----- ------ --------- ---- ------------ ------ ---- ---- ------------------- ------ ----- ---- -------------------- ------------------ ----- ------ - - - ----- ---- ---------- ---- -- - ----- --------- ---------- ----- -- - ----- ------ - --- ----------- ------- -- ------ ------- ------
-- -------------------- ---- ------- -- ------- ------ --- ---- ----- ------ --- ---- ----------- ------ ------ ---- ---------- ------------------------ - ----- --- ----- ------- ------- - -- ------- -----------------
<!-- Home.vue --> <template> <h1>Home</h1> </template>
<!-- About.vue --> <template> <h1>About</h1> </template>
<!-- App.vue -->
<template>
<div id="app">
<router-view></router-view>
</div>
</template>总结
本文详细介绍了 Vue.js 中配置路由的方法。其中，路由是指通过 URL 地址来切换页面的技术，其基本概念包括路由路径和组件映射。Vue.js 中配置路由的步骤包括安装 vue-router、引入和使用 vue-router、定义路由、注册路由和添加路由出口。通过学习本文，你可以快速掌握 Vue.js 中配置路由的方法，并实现基本的 SPA 应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645375cf968c7c53b07d7151