安装 Vue Router
Vue Router 是 Vue.js 官方的路由管理器。它与 Vue.js 核心深度集成，让构建单页面应用变得非常简单。你可以通过 npm 或者 yarn 来安装 Vue Router。
--- ------- ---------------
或者
---- --- ---------------
创建一个简单的路由
首先，我们需要在项目中创建一个新的路由配置文件。假设我们有一个名为 router/index.js 的文件，我们可以在这里定义我们的路由规则。
------ - ------------- ---------------- - ---- ------------
------ ---- ---- -------------------
------ ----- ---- --------------------
----- ------ - -
-
----- ----
----- -------
---------- ----
--
-
----- ---------
----- --------
---------- -----
-
-
----- ------ - --------------
-------- ---------------------------------------
------
--
------ ------- ------在这个例子中，我们定义了两个路由：一个是首页，另一个是关于页。每个路由都有一个路径、一个名称和一个组件。
在主应用中使用路由
接下来，我们需要在我们的主应用文件中引入并使用这个路由配置。通常，这个文件是 main.js 或 main.ts。
------ - --------- - ---- ----- ------ --- ---- ----------- ------ ------ ---- ---------- ----------------------------------------
这里我们通过 createApp 函数创建了一个 Vue 应用，并通过 .use() 方法将路由添加到应用中。最后，我们使用 .mount() 将应用挂载到 DOM 中。
路由链接与导航
使用 <router-link> 进行导航
为了方便地进行页面间的跳转，Vue Router 提供了一个 <router-link> 组件。我们可以使用它来创建指向特定路由的链接。
----------
-----
-----
------------ ------------------------- -
------------ -------------------------------
------
---------------------------
------
-----------在上面的例子中，我们创建了两个链接：一个指向首页，另一个指向关于页。当用户点击这些链接时，对应的组件将会被渲染到 <router-view> 中。
动态路由匹配
有时候，我们可能需要根据 URL 的变化来动态地改变页面的内容。Vue Router 支持动态路由匹配，允许我们在 URL 中包含参数。
- ----- ------------ ----- ------- ---------- ---- -
在这个例子中，:id 是一个动态参数，可以匹配任何值。然后，在组件内部，我们可以通过 this.$route.params.id 访问到这个值。
编程式导航
除了使用 <router-link> 外，我们还可以通过编程方式导航到不同的路由。这在某些情况下非常有用，比如处理表单提交或响应用户操作。
---------------------------
或者
------------------------------
这两个方法都可以用来导航到新的路由，区别在于 push 会在历史记录中留下一条记录，而 replace 则不会。
路由守卫
Vue Router 提供了多种类型的路由守卫，用于在进入或离开路由之前执行一些逻辑。常见的有全局守卫、路由独享守卫和组件内的守卫。
全局前置守卫
全局前置守卫允许我们在每次路由切换之前执行一些逻辑，比如权限验证。
---------------------- ----- ----- -- -
-- --------------------- -- ------------------- -
--------------
- ---- -
------
-
--在这个例子中，我们检查目标路由是否需要认证，如果需要但用户未登录，则重定向到登录页面。
路由独享守卫
每个路由都可以有自己的独享守卫，这样可以更细粒度地控制路由的行为。
----- ----- - -
----- ---------
---------- ------
--------------- ----- ----- -
-- ------------ -
-------------
- ---- -
------
-
-
-组件内守卫
对于组件来说，还可以使用组件内的守卫来执行特定于该组件的逻辑。
------ ------- -
-------------------- ----- ----- -
-- ------------ ------- ---
------
--
--------------------- ----- ----- -
-- -------------------
------
--
-------------------- ----- ----- -
-- ---------------
------
-
-以上就是 Vue3 路由的基础部分。通过这些知识，你可以开始构建具有复杂导航逻辑的应用程序了。希望你能继续深入学习，探索更多高级功能！