介绍
Vue.js 是一款流行的前端框架，Vue-router 则是 Vue.js 的官方路由器。Vue-router 可以帮助我们实现前端路由功能，实现单页面应用（SPA）。本文将介绍如何基于 Vue.js 实现一个简单的路由器。
前置条件
在开始前，请确保您已经了解 Vue.js 的基础知识，并已经安装好 Vue.js。
安装
通过 NPM 安装 vue-router：
npm install vue-router --save
实现
1. 创建路由器
在 main.js 文件中引入 Vue 和 Vue-router，并创建一个路由器实例：
-- -------------------- ---- ------- ------ --- ---- ----- ------ --------- ---- ------------ ------------------ ----- ------ - --- ----------- ------- -- -- --- ----- ------ -----------------
2. 定义路由
在路由器实例中，定义路由路径以及对应的组件：
-- -------------------- ---- -------
------ ---- ---- -----------------------
------ ----- ---- ------------------------
----- ------ - --- -----------
------- -
-
----- ----
----- -------
---------- ----
--
-
----- ---------
----- --------
---------- -----
-
-
--3. 渲染router-view
在根组件中使用 <router-view> 渲染路由组件：
<template>
<div>
<h1>Hello, Vue.js!</h1>
<router-view></router-view>
</div>
</template>4. 定义router-link
通过 <router-link> 组件来实现不同路由之间的跳转：
-- -------------------- ---- -------
----------
-----
---------- ------------
-----
------------ -------------------------
------------ -------------------------------
------
---------------------------
------
-----------5. 执行路由跳转
通过调用 $router.push() 方法来实现路由跳转：
this.$router.push('/')
this.$router.push('/about')示例代码
下面是一个完整的代码示例：
-- -------------------- ---- -------
------ --- ---- -----
------ --------- ---- ------------
------ --- ---- -----------
------ ---- ---- -----------------------
------ ----- ---- ------------------------
------------------
----- ------ - --- -----------
------- -
-
----- ----
----- -------
---------- ----
--
-
----- ---------
----- --------
---------- -----
-
-
--
--- -----
--- -------
-------
------- - -- ------
---- -------------------- ---- -------
---- ------- ---
----------
-----
---------- ------------
-----
------------ -------------------------
------------ -------------------------------
------
---------------------------
------
-----------
--------
------ ------- -
-
---------
-------
---------- -------------------- ---- -------
---- -------- ---
----------
-----
-------------
------- -- --- ---- ---------
------
-----------
--------
------ ------- -
-
---------
-------
---------- -------------------- ---- -------
---- --------- ---
----------
-----
--------------
------- -- --- ----- ---------
------
-----------
--------
------ ------- -
-
---------
-------
--------结论
通过本文，您已经了解了如何使用 Vue.js 实现一个简单的路由器，并实现了路由的基本功能。虽然本文的路由器非常简单，但是您可以在此基础上实现更复杂的路由功能，例如嵌套路由、路由守卫等。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672d5b54ddd3a70eb6da33d1