在 Vue.js 单页应用程序中，路由管理是一个不可或缺的部分。Vue Router 是 Vue.js 官方路由管理器，它可以让你轻松地构建单页应用程序。
安装
使用 NPM 安装 Vue Router：
--- ------- ----------
路由配置
在 Vue.js 应用程序中使用 Vue Router 的第一步是在路由器对象中定义路由配置。下面是一个简单的示例：
------ --- ---- -----
------ --------- ---- ------------
------ ---- ---- ------------------
------ ----- ---- -------------------
------------------
----- ------ - --- -----------
------- -
-
----- ----
----- -------
---------- ----
--
-
----- ---------
----- --------
---------- -----
-
-
--
------ ------- ------在上面的示例中，我们首先导入 Vue、Vue Router 和两个组件 Home 和 About。然后，我们通过调用 Vue.use(VueRouter) 来安装 Vue Router 插件。
接下来，我们创建一个新的 VueRouter 实例，并将路由配置作为选项传递给它。routes 选项是一个数组，其中每个对象表示一个路由规则。
在这个例子中，我们定义了两条路由规则，一条是根路径 /，对应的组件是 Home；另一条是 /about，对应的组件是 About。
路由跳转
当用户在应用程序中进行导航时，Vue Router 可以根据路由规则来渲染相应的组件。为了在 Vue.js 应用程序中导航，我们可以使用 <router-link> 组件或者编程式导航。
使用 <router-link>
<router-link> 组件可以渲染成一个 HTML 锚点，点击它会自动触发路由切换：
----------
-----
------------ -------------------------
------------ -------------------------------
------
-----------编程式导航
除了通过 <router-link> 组件导航外，我们还可以通过编程方式来实现路由跳转。在 Vue 组件中，可以通过 $router 对象访问路由器实例。
以下是一个简单的例子，演示如何在组件中使用 $router.push() 方法跳转到指定的路由：
------ ------- -
-------- -
----------- -
---------------------------
-
-
-嵌套路由
有时候，在 Vue.js 单页应用程序中，我们需要嵌套路由来实现更复杂的 UI 界面。Vue Router 支持嵌套路由配置。
下面是一个示例，演示如何在父级路由中定义一个嵌套的子级路由：
----- ------ - --- -----------
------- -
-
----- ----
----- -------
---------- -----
--------- -
-
----- --------
----- --------
---------- -----
-
-
-
-
--在上面的例子中，我们在 / 路由下定义了一个名为 home 的路由规则，并指定了一个名为 Home 的组件。children 选项是一个数组，其中包含一个嵌套的子级路由规则。子级路由规则的 path 属性是相对于父级路由规则的。
路由守卫
Vue Router 还提供了一种叫做“导航守卫”的机制，可以在路由跳转前、跳转后或者取消跳转时执行一些操作。这个机制
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/32563