Vue.js 是一款流行的 JavaScript 库，主要用于构建交互式的用户界面。在 Vue.js 中，实现导航菜单和面包屑导航可以通过使用路由进行管理。本文将详细介绍在 Vue.js 中如何实现导航菜单和面包屑导航。
Vue-router
Vue-router 是 Vue.js 的官方路由管理器，可以用于实现单页面应用和多页面应用。它可以轻松地实现页面之间的导航，以及在导航过程中更改视图和组件。
在使用 Vue-router 进行导航管理时，我们需要定义路由表和路由组件。
定义路由表
路由表是一个 JavaScript 对象，用于定义应用程序的路由。它指定了每个 URL 对应的组件以及在 URL 中传递的参数。
下面是一个简单的路由表示例：
-- -------------------- ---- -------
------ --- ---- -----
------ ------ ---- ------------
------ ---- ---- ------------------
------ ----- ---- -------------------
------ ---- ---- ------------------
---------------
------ ------- --- --------
------- -
-
----- ----
----- -------
---------- ----
--
-
----- ---------
----- --------
---------- -----
--
-
----- ------------
----- -------
---------- ----
-
-
--在上面的示例中，我们定义了三个路由：
- 根路由：对应首页，路径为
/，组件为Home.vue。 about路由：对应关于页面，路径为/about，组件为About.vue。blog路由：对应博客页面，路径为/blog/:id，其中:id表示博客文章的 ID，组件为Blog.vue。
在路由表中，我们还可以设置路由的元信息，例如页面标题、页面图标等。
定义路由组件
路由组件是一个 Vue.js 组件，用于渲染在路由对应的页面。它可以接受来自路由参数的参数，以便根据参数渲染不同的内容。
下面是一个简单的路由组件示例：
-- -------------------- ---- -------
----------
-----
------------------
------------------
------
-----------
--------
------ ------- -
----- -------
------ -------
------ -
------ -
------ ---
-------- --
-
--
--------- -
----------------
--
-------- -
----------- -
-- -- -- -----------
-- ---
---------- - --------
------------ - --------
-
-
-
---------在上面的示例中，路由组件使用 props 属性来接受路由参数 id，然后在 fetchData 方法中根据 id 获取博客文章标题和内容，并将它们赋值给 title 和 content 变量以便在页面中呈现。
在 Vue.js 中使用路由
使用 Vue-router 的第一步是将路由表注入到 Vue 实例中。这可以通过在应用程序的入口文件中导入路由表并将其传递给 Vue 实例来完成。
下面是一个简单的入口文件示例：
-- -------------------- ---- ------- ------ --- ---- ----- ------ --- ---- ----------- ------ ------ ---- ---------- ------------------------ - ----- --- ----- ------- ------- - -- ------- -----------------
在上面的示例中，我们导入了 App.vue 组件和路由表，然后将路由表作为选项传递给 Vue 实例的 router 属性。
使用路由时，我们可以通过调用 $router.push() 方法来进行页面导航。例如，在一个事件处理程序方法中调用 $router.push('/blog/' + id) 将会导航到 blog 路由，并传递 id 参数。
实现导航菜单
导航菜单是用户用于导航网站的主要菜单。在 Vue.js 中，实现导航菜单可以通过使用 router-link 组件来生成链接。
下面是一个简单的导航菜单示例：
<template>
<div>
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
<router-link to="/blog">Blog</router-link>
</div>
</template>在上面的示例中，我们使用 router-link 组件来生成链接，其 to 属性指定了链接的目标路由。当用户单击链接时，Vue-router 会自动导航到相应的路由。
实现面包屑导航
面包屑导航是用户在导航到当前页面时所经过的路径的可视化表示。在 Vue.js 中，我们可以使用 Vue-router 的导航守卫来实现面包屑导航。
下面是一个简单的面包屑导航示例：
-- -------------------- ---- -------
----------
-----
------------ -------------------------
------ - -------
------------ -------------------------------
------ - -------
--------------------------
------
-----------
--------
------ ------- -
----- -------------
------ -
------ -
---------- --
-
--
--------- -
---------------------------- ----- ----- -- -
-------------- - -------
------
--
-
-
---------在上面的示例中，我们使用 router-link 组件来生成导航链接，然后使用 span 标签来生成导航分隔符。
在 created 生命周期钩子函数中，我们使用 beforeEach 导航守卫来获取当前路由的名称，并将其赋值给 pageTitle，以便在面包屑导航中使用。当用户导航到一个新页面时，页面标题将自动更新。
结论
在 Vue.js 中，使用 Vue-router 可以轻松地实现导航菜单和面包屑导航。导航菜单使用 router-link 组件来生成链接，而面包屑导航可以使用导航守卫和页面标题来实现。通过使用 Vue.js 和 Vue-router，我们可以创建交互式和易于导航的用户界面。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6752d5f38bd460d3ad991356