Vue-Router 是一个官方的 Vue.js 路由管理器，它可以帮助前端开发者构建单页应用程序 (SPA)。本文将介绍 Vue-Router 的基本概念和使用方法。
前置知识
在学习 Vue-Router 之前，需要掌握以下技术：
- HTML、CSS 和 JavaScript 的基础知识。
- Vue.js 框架的基本使用方法。
安装和配置
要使用 Vue-Router，需要先安装它。可以使用 npm 进行安装：
npm install vue-router
安装完成后，在 main.js 中导入和使用 Vue-Router：
-- -------------------- ---- -------
------ --- ---- -----
------ --------- ---- ------------
------------------
----- ------ - --- -----------
------- -
-
----- ----
----- -------
---------- ----
--
-
----- ---------
----- --------
---------- -----
-
-
--
--- -----
-------
------- - -- ------
-----------------在这段代码中，我们创建了一个路由实例，并为其指定了两个路由路径 / 和 /about，分别对应着 Home 和 About 组件。最后将路由实例挂载到 Vue 实例上。
路由链接和视图
Vue-Router 提供了 <router-link> 组件来创建路由链接。以下是一个简单的示例：
<router-link to="/">Home</router-link> <router-link to="/about">About</router-link>
当用户点击这些链接时，路由会根据 to 属性的值来渲染匹配的组件。
要在 Vue 应用程序中显示路由组件，需要使用 <router-view> 组件。以下是一个简单的示例：
<router-view></router-view>
嵌套路由
可以将路由配置对象嵌套到另一个路由配置对象中，从而实现嵌套路由。以下是一个示例：
-- -------------------- ---- -------
----- ------ - --- -----------
------- -
-
----- ----
---------- ----------
--------- -
-
----- ---
----- -------
---------- ----
--
-
----- --------
----- --------
---------- -----
-
-
-
-
--在这个示例中，我们定义了一个名为 AppLayout 的布局组件，并将其作为父路由组件。在 children 数组中定义了两个子路由 / 和 /about。
路由传参
Vue-Router 支持通过路由参数来向组件传递信息。以下是一个示例：
-- -------------------- ---- -------
----- ------ - --- -----------
------- -
-
----- ------------
----- -------
---------- ----
-
-
--在这个示例中，我们定义了一个名为 User 的组件，并为其指定了一个路由参数 id。当用户访问 /user/1 时，路由会将 1 作为路由参数传递给 User 组件。
要在组件中访问路由参数，可以使用 $route.params 对象。以下是一个示例：
export default {
name: 'User',
props: ['id'],
mounted () {
console.log(`User #${this.id}`)
}
}在这个示例中，我们通过 props 属性声明了一个名为 id 的属性，并在组件的 mounted 生命周期钩子中打印出了该属性的值。
总结
本文介绍了 Vue-Router 的基本概念和使用方法，包括安装和配置、路由链接和视图、嵌套路由以及路由传参等内容。希望本文对初学者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/1640