Vue.js 是一个流行的前端框架，它可以用于构建单页应用程序和动态网页。Vue-route 和 Vue-router 是两个关键的插件，它们可以帮助我们在 Vue.js 中更好地管理应用程序的路由。
Vue-route vs Vue-router
Vue-route 是一个旧的插件，它是 Vue.js 的官方插件。它专门用于处理应用程序的路由。Vue-router 是一个第三方插件，它提供了一些额外的功能和工具以管理 Vue.js 应用程序的路由。
安装 Vue-route 和 Vue-router
安装 Vue-route 和 Vue-router 非常简单，我们可以使用 npm 或 yarn 安装它们。
--- ------- ---------- ------
---- --- ----------
使用 Vue-route 和 Vue-router
使用 Vue-route 和 Vue-router 有两种方式：全局安装和局部安装。如果您想在整个应用程序中使用它们，则应该全局安装。如果您只想在特定的 Vue.js 实例或组件中使用它们，则应该局部安装。
全局安装
在您的应用程序的入口处，我们可以像下面这样全局安装 Vue-router。
------ --- ---- -----
------ --------- ---- ------------
------------------
----- ------ - --- -----------
------- -
-
----- ----
---------- ----
--
-
----- ---------
---------- -----
-
-
--
--- -----
--- -------
-------
------- - -- ------
--在上面的代码中，我们首先将 Vue-router 导入到我们的应用程序中。然后我们使用 Vue.use 告诉 Vue.js 我们将使用 Vue-router。接下来我们创建一个新的 VueRouter 实例，并将我们的路由配置传递给它。最后，我们在我们的 Vue 实例上挂载该实例。
局部安装
我们也可以在特定的 Vue.js 实例中安装和使用 Vue-route 和 Vue-router。
------ --------- ---- ------------
----- ------ - --- -----------
------- -
-
----- ----
---------- ----
--
-
----- ---------
---------- -----
-
-
--
--- -----
--- -------
-------
------- - -- -------
----------- -
------- -----
-------- -----
-
--在上面的代码中，我们在 Vue 实例之前创建并设置了一个新的 VueRouter 实例。我们然后将该实例作为属性传递给我们的 Vue 实例。最后，我们在我们的 Vue 实例中注册了两个组件：Home 和 About。
在路由中使用 Vue-route 或 Vue-router
我们可以使用 Vue-route 和 Vue-router 来管理应用程序的路由，处理 URL 和指向各个页面。下面是一个示例代码。
Vue-route
------ --- ---- -----
------ --------- ---- ------------
------ ---- ---- -----------------------
------ ----- ---- ------------------------
------------------
----- ------ - -
- ----- ---- ---------- ---- --
- ----- --------- ---------- ----- -
-
----- ------ - --- -----------
------
--
--- -----
--- -------
-------
--------- -
-----
------------ -------------------------
------------ -------------------------------
---------------------------
------
-
--在上面的代码中，我们首先导入 Vue 和 VueRouter。我们然后使用 Vue.use 为 Vue.js 安装 Vue-router。接下来，我们创建了一个路由数组，用于指定我们应用程序的不同路由。然后我们创建了一个新的 VueRouter 实例，并将路由数组传递给它。最后，我们创建了一个 Vue 实例，该实例挂载在一个 ID 为 app 的元素上，并设置其模板。模板拥有两个 router-link 和一个 router-view 元素，router-link 元素用于在我们的应用程序中导航到不同的路由。而 router-view 元素则指定我们应该显示的视图。
Vue-router
------ --- ---- -----
------ --------- ---- ------------
------ ---- ---- -----------------------
------ ----- ---- ------------------------
------------------
----- ------ - --- -----------
------- -
- ----- ---- ---------- ---- --
- ----- --------- ---------- ----- -
-
--
--- -----
--- -------
-------
--------- -
-----
------------ ------ ----- ------ ---------------------
------------ ------ ----- ------- ----------------------
---------------------------
------
-
--在上面的代码中，我们导入了 Vue 和 VueRouter 并安装了 Vue-router。我们然后创建了一个新的 VueRouter 实例，该实例设置了不同路由的路径和组件。接下来，我们创建了一个新的 Vue 实例，该实例挂载在一个 ID 为 app 的元素上，并设置模板。模板拥有两个 router-link 元素和一 router-view 元素，router-link 元素用于在我们的应用程序中导航到不同的路由。而 router-view 元素则指定我们应该显示的视图。
结论
Vue-route 和 Vue-router 是两个非常强大和有用的插件，它们可以帮助我们在 Vue.js 应用程序中管理路由，处理 URL 和链接到不同的页面。无论您正在构建什么类型的应用程序，在您的 Vue.js 实现中学习和使用这些插件都将有助于更好地管理您的路由逻辑。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/673943e5317fbffedf15eaa6