Vue-Router 使用实例,Hash 方式和 History 方式切换

阅读时长 4 分钟读完

Vue-Router 是 Vue.js 官方提供的用于进行前端路由管理的插件,能够实现单页面应用程序中的路由功能。本文将介绍 Vue-Router 的使用实例和 Hash 方式和 History 方式切换,以供初学者参考。

Vue-Router 的使用

安装 Vue-Router

首先,在使用 Vue-Router 之前,需要安装该插件。在命令行中执行以下命令:

安装完成之后,在 main.js 文件中引入 Vue-Router 并使用:

配置路由

接下来,我们需要配置路由。在新建一个路由文件夹,比如 router 文件夹,用于存放路由相关代码。在该文件夹中新建一个 index.js 文件来配置路由:

-- -------------------- ---- -------
------ --- ---- -----
------ ------ ---- ------------

---------------

------ ------- --- --------
  ------- -
    -
      ----- ----
      ----- -------
      ---------- ----
    --
    -
      ----- ---------
      ----- --------
      ---------- -----
    -
  -
--

在该代码中,我们首先使用 Vue.use() 方法来注册 Vue-Router 插件,接着使用 export default 语法将一个新的 Router 实例导出作为路由的配置。在 routes 数组中我们定义了两个路由的对象,每一个路由对象都由三个属性组成:path 表示路由的路径,name 表示路由的名称,component 表示路由所对应的组件。

接下来,我们需要在 Vue 实例中配置 router 实例:

-- -------------------- ---- -------
------ --- ---- -----
------ --- ---- -----------
------ ------ ---- ----------

--- -----
  --- -------
  -------
  ------- - -- ------
--

这样,我们就可以在 App.vue 组件中使用 <router-view></router-view> 标签展示路由。

当路由路径变化时,<router-view> 标签所包含的组件也会随之变化。

Hash 方式和 History 方式切换

在 Vue-Router 中,有两种路由方式可以选择:Hash 模式和 History 模式。

Hash 模式

Hash 模式即在地址中加上 #,然后通过监听 hashchange 事件来切换路由。该模式需要设置 router 的 mode 属性为 'hash':

启用 Hash 模式后,我们在浏览器地址栏中输入 ‘http://localhost:8080/#/about’,路由实例就会去检查 hash,并针对相应的路由做出相应的处理。在页面上,路由的切换将发生在当前的页面中间。

History 模式

History 模式则是利用 HTML5 History API,在地址中去除 #,使 URL 更加美观。该模式需要设置 router 的 mode 属性为 'history':

启用 History 模式后,我们在浏览器地址栏中输入 ‘http://localhost:8080/about’,路由实例将自己匹配到对应的路由并处理。在页面上,路由切换将会像正常的跳转一样,浏览器会向服务器发送一个 GET 请求,服务器会返回该页面的 HTML 内容,这些操作都是不需要刷新页面的。

需要注意的是,使用 History 模式需要特别的配置来保证路由正常工作。我们需要在后端服务器上进行一些配置,以确保路由到正确的路由文件。否则,当用户在页面中刷新时,服务器将无法找到匹配的路由并返回 404 页面。

总结

Vue-Router 是 Vue.js 中重要的插件之一,可以帮助开发人员快速实现前端路由管理。而 Hash 模式和 History 模式则是路由选择时需要考虑的两个方面,Depend on 个人选择。本文展示了 Vue-Router 的使用实例,以及详细地介绍了 Hash 模式和 History 模式以供参考。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6469913b968c7c53b0971e57

纠错
反馈