Vue-Router 是 Vue.js 官方提供的用于进行前端路由管理的插件,能够实现单页面应用程序中的路由功能。本文将介绍 Vue-Router 的使用实例和 Hash 方式和 History 方式切换,以供初学者参考。
Vue-Router 的使用
安装 Vue-Router
首先,在使用 Vue-Router 之前,需要安装该插件。在命令行中执行以下命令:
npm install vue-router
安装完成之后,在 main.js 文件中引入 Vue-Router 并使用:
import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter)
配置路由
接下来,我们需要配置路由。在新建一个路由文件夹,比如 router 文件夹,用于存放路由相关代码。在该文件夹中新建一个 index.js 文件来配置路由:
-- -------------------- ---- ------- ------ --- ---- ----- ------ ------ ---- ------------ --------------- ------ ------- --- -------- ------- - - ----- ---- ----- ------- ---------- ---- -- - ----- --------- ----- -------- ---------- ----- - - --
在该代码中,我们首先使用 Vue.use() 方法来注册 Vue-Router 插件,接着使用 export default 语法将一个新的 Router 实例导出作为路由的配置。在 routes 数组中我们定义了两个路由的对象,每一个路由对象都由三个属性组成:path 表示路由的路径,name 表示路由的名称,component 表示路由所对应的组件。
接下来,我们需要在 Vue 实例中配置 router 实例:
-- -------------------- ---- ------- ------ --- ---- ----- ------ --- ---- ----------- ------ ------ ---- ---------- --- ----- --- ------- ------- ------- - -- ------ --
这样,我们就可以在 App.vue 组件中使用 <router-view></router-view> 标签展示路由。
<template> <div> <router-link to="/">Home</router-link> <router-link to="/about">About</router-link> <router-view></router-view> </div> </template>
当路由路径变化时,<router-view> 标签所包含的组件也会随之变化。
Hash 方式和 History 方式切换
在 Vue-Router 中,有两种路由方式可以选择:Hash 模式和 History 模式。
Hash 模式
Hash 模式即在地址中加上 #,然后通过监听 hashchange 事件来切换路由。该模式需要设置 router 的 mode 属性为 'hash':
export default new Router({ mode: 'hash', routes: [ // ... ] })
启用 Hash 模式后,我们在浏览器地址栏中输入 ‘http://localhost:8080/#/about’,路由实例就会去检查 hash,并针对相应的路由做出相应的处理。在页面上,路由的切换将发生在当前的页面中间。
History 模式
History 模式则是利用 HTML5 History API,在地址中去除 #,使 URL 更加美观。该模式需要设置 router 的 mode 属性为 'history':
export default new Router({ mode: 'history', routes: [ // ... ] })
启用 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