在前端开发中，标签导航栏是一个常见的功能。它可以让用户在不同的页面之间方便地切换，增加用户体验。本文介绍如何使用 Vue-Router 和 Vuex 实现标签导航栏，包括标签的动态添加和删除。
Vue-Router 简介
Vue-Router 是 Vue.js 的官方路由管理器。它可以帮助我们实现页面之间的跳转和参数传递，还支持嵌套路由和动态路由等功能。同时，Vue-Router 也提供了一些钩子函数，可以在路由跳转前、后做一些操作，如认证、数据预加载等。
Vuex 简介
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 为我们提供了状态管理的统一方式，使得我们可以更加方便地进行状态的维护和管理。
实现标签导航栏
为了实现标签导航栏，我们需要用到 Vue-Router 和 Vuex。具体步骤如下：
- 在 Vue-Router 中添加一个路由钩子，每次路由跳转时将当前路由信息存入 Vuex 中；
- 使用 Vuex 存储当前选中的标签信息和所有已打开的标签信息；
- 在标签组件中，监听路由变化，将页面的标题设置为当前选中的标签的标题；
- 在标签组件中，使用 Vuex 中存储的标签信息渲染标签导航栏；
- 在标签组件中，实现标签的动态添加和删除。
下面我们逐步进行详细的讲解。
添加路由钩子
在 Vue-Router 中添加一个路由钩子，在每次路由跳转时将当前路由信息存入 Vuex 中。代码如下：
-- -------------------- ---- ------- ------ ----- ---- --------- ----- ------ - --- ----------- ------- ------ ----- --------- --- ---------------------- ----- ----- -- - ---------------------- ---- ------- ---
在 beforeEach 钩子中，我们调用了 Vuex 中的一个 addTag mutation，将当前的路由信息存入 Vuex 的标签信息中。注意：在代码中我们假设已经存在一个名为 addTag 的 mutation。
使用 Vuex 存储标签信息
使用 Vuex 存储当前选中的标签信息和所有已打开的标签信息。代码如下：
-- -------------------- ---- -------
------ --- ---- -----
------ ---- ---- ------
-------------
----- ----- - --- ------------
------ -
---------- -----
--------- --
--
---------- -
------------ ------- ---- -
--------------- - ----
--
----------- ------- ----- -
-------------- - -----
--
------ ------- ---- -
----- ----- - ----------------------------- -- --------- --- ----------
-- ------ --- --- -
-------------------------
-
--------------- - ----
--
--------- ------- ---- -
----- ----- - ----------------------------- -- --------- --- ----------
-- ------ --- --- -
---------------------------- ---
-
-- ---------------- -- -------------------- --- --------- -
--------------- - ------------------------------------ - -- -- -----
-
-
--
-------- -
--
-------- -
-
---
------ ------- ------在代码中，我们定义了一个名为 setActiveTag 的 mutation，用于设置当前选中的标签；定义了一个名为 setOpenTags 的 mutation，用于设置所有已打开的标签列表；定义了一个名为 addTag 的 mutation，用于向标签列表中添加一个标签，并将其设置为当前选中的标签；定义了一个名为 removeTag 的 mutation，用于从标签列表中删除一个标签，并将删除后的最后一个标签设置为当前选中的标签。
监听路由变化
在标签组件中，监听路由变化，将页面的标题设置为当前选中的标签的标题。代码如下：
-- -------------------- ---- -------
---- ------- ---
----------
---- ---------
--------
-------------------
---------
------------ ---------------------------------
------
-----------
--------
------ ------ ---- -------------------------
------ ------- -
----------- -
------
-
-
----------- -------------------- ---- -------
-- ----------
------ ------- -
--------- -
--------- -- -
------ ----------------------------
--
-------- -- -
------ ---------------------------
-
--
------ -
-------- -- -
----- --- - ---------------------- -- -------- --- ------------------
-- ----- -
---------------------------------- -----
-------------- - ----------
-
-
--
-------- -
--------- ----- -
---------------------------------- -----
----------------------------
--
--------- ----- -
------------------------------- -----
-
-
-在标签组件中，我们使用了一个名为 $route 的内置属性来监听路由变化。每当路由变化时，我们查找标签列表中是否存在当前路由对应的标签。如果存在，我们将其设置为当前选中的标签，同时将页面标题设置为该标签的标题。
渲染标签导航栏
在标签组件中，使用 Vuex 中存储的标签信息渲染标签导航栏。代码如下：
-- -------------------- ---- -------
---- ---------- ---
----------
---- ----------------
---- ----------------------
----
---------- -- ---------
---------------
--------- ------- --- --- --------- --
-----------------------
-
-- --------- --
----- ----------------------- - -- ----------------- -------------------------------------
------
------
------
-----------
--------
------ ------- -
--------- -
--------- -- -
------ ----------------------------
--
-------- -- -
------ ---------------------------
-
--
------ -
-------- -- -
----- --- - ---------------------- -- -------- --- ------------------
-- ----- -
---------------------------------- -----
-------------- - ----------
-
-
--
-------- -
--------- ----- -
---------------------------------- -----
----------------------------
--
--------- ----- -
------------------------------- -----
-
-
-
---------在代码中，我们使用了一个 v-for 循环来遍历标签列表，并使用了一个 v-show 指令来控制删除按钮的显示。同时，我们还定义了一个 active class 来高亮当前选中的标签。
动态添加和删除标签
在标签组件中，实现标签的动态添加和删除。代码如下：
-- -------------------- ---- -------
---- ---------- ---
----------
---- ----------------
---- ----------------------
----
---------- -- ---------
---------------
--------- ------- --- --- --------- --
-----------------------
-
-- --------- --
----- ----------------------- - -- ----------------- -------------------------------------
------
---- ----------------- ----------------------------------
------
------
-----------
--------
------ ------- -
--------- -
--------- -- -
------ ----------------------------
--
-------- -- -
------ ---------------------------
-
--
------ -
-------- -- -
----- --- - ---------------------- -- -------- --- ------------------
-- ----- -
---------------------------------- -----
-------------- - ----------
-
-
--
-------- -
--------- ----- -
---------------------------------- -----
----------------------------
--
--------- ----- -
------------------------------- -----
-
-
-
----------- -------------------- ---- -------
-- --------
----- ----- - --- ------------
------ -
---------- -----
--------- --
--
---------- -
---
------ ------- ---- -
----- ----- - ----------------------------- -- --------- --- ----------
-- ------ --- --- -
-------------------------
-
--------------- - ----
--
--------- ------- ---- -
----- ----- - ----------------------------- -- --------- --- ----------
-- ------ --- --- -
---------------------------- ---
-
-- ---------------- -- -------------------- --- --------- -
--------------- - ------------------------------------ - -- -- -----
-
--
------------- ------- -
--------------- - -----
-------------- - ---
-
--
-------- -
------ -- ------ -- ---- -
---------------- -----
--
--------- -- ------- ----- -- ---- -
-- ---------------------- --- -- -
-------
-
------------------- -----
--
------------- -- ------ -- -
------------------------
-
--
-------- -
-
---
------ ------- ------在代码中，我们为 addTag 和 removeTag mutations 定义了对应的 action，用于动态添加和删除标签。同时，我们还添加了一个名为 removeAllTags 的 mutation，用于移除所有标签。
示例代码
最终的示例代码如下：
-- -------------------- ---- -------
---- ------- ---
----------
---- ---------
--------
-------------------
---------
------------ ---------------------------------
------
-----------
--------
------ ----- ---- ---------
------ ------ ---- -------------------------
------ ------- -
----------- -
------
--
------- -- -
------------------------ - ----- ---- ------ ---- ---
-
-
----------- -------------------- ---- -------
---- ---------- ---
----------
---- ----------------
---- ----------------------
----
---------- -- ---------
---------------
--------- ------- --- --- --------- --
-----------------------
-
-- --------- --
----- ----------------------- - -- ----------------- -------------------------------------
------
---- ----------------- ----------------------------------
------
------
-----------
--------
------ ------- -
--------- -
--------- -- -
------ ----------------------------
--
-------- -- -
------ ---------------------------
-
--
------ -
-------- -- -
----- --- - ---------------------- -- -------- --- ------------------
-- ----- -
---------------------------------- -----
-------------- - ----------
-
-
--
-------- -
--------- ----- -
---------------------------------- -----
----------------------------
--
--------- ----- -
------------------------------- -----
-
-
-
----------- -------------------- ---- -------
-- --------
------ --- ---- ------
------ ---- ---- -------
--------------
----- ----- - --- ------------
------ -
---------- -----
--------- --
--
---------- -
------------ ------- ---- -
--------------- - ----
--
----------- ------- ----- -
-------------- - -----
--
------ ------- ---- -
----- ----- - ----------------------------- -- --------- --- ----------
-- ------ --- --- -
-------------------------
-
--------------- - ----
--
--------- ------- ---- -
----- ----- - ----------------------------- -- --------- --- ----------
-- ------ --- --- -
---------------------------- ---
-
-- ---------------- -- -------------------- --- --------- -
--------------- - ------------------------------------ - -- -- -----
-
--
------------- ------- -
--------------- - -----
-------------- - ---
-
--
-------- -
------ -- ------ -- ---- -
---------------- -----
--
--------- -- ------- ----- -- ---- -
-- ---------------------- --- -- -
-------
-
------------------- -----
--
------------- -- ------ -- -
------------------------
-
--
-------- -
-
---
------ ------- ------总结
通过使用 Vue-Router 和 Vuex，我们可以实现一个带有标签导航栏的前端应用。在实现过程中，需要注意以下几点：
- 在
beforeEach钩子中，将当前路由信息存入 Vuex 中； - 使用 Vuex 存储当前选中的标签信息和所有已打开的标签信息；
- 在标签组件中，监听路由变化，将页面的标题设置为当前选中的标签的标题；
- 在标签组件中，使用 Vuex 中存储的标签信息渲染标签导航栏；
- 在标签组件中，实现标签的动态添加和删除。
以上是在前端实现标签导航栏的一些思路和方法。在实际应用中，我们可以根据具体需求进行适当的修改和扩展，以满足项目的需要。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645e3d7a968c7c53b009ff21