阿珊详解Vue路由的两种模式:hash模式与history模式

简介: 阿珊详解Vue路由的两种模式:hash模式与history模式

摘要:


🤔 Vue路由提供了两种模式:hash模式与history模式。本文将介绍这两种模式的特点与使用场景,帮助读者更好地掌握Vue路由的配置与应用。👩‍💻


引言:


🌈 Vue.js框架以其简洁的语法和声明式的数据绑定而受到开发者的喜爱。在单页面应用(SPA)中,路由管理是不可或缺的功能。Vue路由提供了两种模式:hash模式与history模式,以满足不同的开发需求。在这篇文章中,我将带你探究这两种模式的特点和应用,以期帮助你更好地运用Vue路由。🚀


正文:


1. 🔧 hash模式

在 web 开发中,hash 模式是一种页面跳转的方式,它不会改变浏览器的 URL,但页面会重新加载。


hash 模式的 URL 后面会跟一个 #,例如:http://example.com/#about


在 Vue 项目中,hash 模式通常用于前端路由。Vue 前端路由使用 hash 模式,是因为 hash 模式不需要后端支持,而且可以在不改变 URL 的同时实现页面跳转和数据更新。


Vue 项目使用 hash 模式的方法如下:

  1. 安装 vue-router:首先,需要安装 vue-router。在项目中引入 vue-router,可以通过 npm 或 yarn 安装:
npm install vue-router --save
• 1

yarn add vue-router
  1. 配置路由:在项目中创建一个名为 router.js 的文件,用于配置路由。首先,引入 vue 和 vue-router:
import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

然后,定义路由规则,并创建一个 Router 实例:

export default new Router({
  mode: 'hash',
  routes: [
    {
      path: '/about',
      name: 'about',
      component: () => import('@/components/About.vue')
    },
    {
      path: '/',
      name: 'home',
      component: () => import('@/components/Home.vue')
    }
  ]
})

这里,mode 设置为 ‘hash’,表示使用 hash 模式。

  1. 在 main.js 中引入 router:在 main.js 文件中,引入刚刚创建的 router.js 文件:
import Vue from 'vue'
import App from './App.vue'
import router from './router'

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')
  1. 使用 router-view 组件:在需要跳转页面的地方,使用 router-view 组件。当点击 router-link 时,页面会根据配置的 hash 值进行跳转:
<router-view></router-view>

总结来说,hash 模式是一种页面跳转的方式,不会改变浏览器的 URL,但页面会重新加载。在 Vue 项目中,hash 模式通常用于前端路由,通过 vue-router 实现。


2. 🔧 history模式

在 Web 开发中,history 模式是一种页面跳转的方式,它会在浏览器的 URL 栏中显示跳转后的页面地址,并且页面不会重新加载。history 模式的 URL 看起来和普通的 HTTP URL 一样,例如:http://example.com/about


在 Vue 项目中,history 模式通常用于前端路由。Vue 前端路由支持 history 模式,使得页面跳转看起来更像传统的网站导航。


Vue 项目使用 history 模式的方法如下:

1. 安装 vue-router:首先,需要安装 vue-router。在项目中引入 vue-router,可以通过 npm 或 yarn 安装:

npm install vue-router --save

yarn add vue-router
• 1
  1. 配置路由:在项目中创建一个名为 router.js 的文件,用于配置路由。首先,引入 vue 和 vue-router:
import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

然后,定义路由规则,并创建一个 Router 实例:

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/about',
      name: 'about',
      component: () => import('@/components/About.vue')
    },
    {
      path: '/',
      name: 'home',
      component: () => import('@/components/Home.vue')
    }
  ]
})
  1. 这里,mode 设置为 ‘history’,表示使用 history 模式。
  2. 在 main.js 中引入 router:在 main.js 文件中,引入刚刚创建的 router.js 文件:
import Vue from 'vue'
import App from './App.vue'
import router from './router'

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

使用 router-view 组件:在需要跳转页面的地方,使用 router-view 组件。当点击 router-link 时,页面会根据配置的 history 值进行跳转:

<router-view></router-view>

总结来说,history 模式是一种页面跳转的方式,会在浏览器的 URL 栏中显示跳转后的页面地址,并且页面不会重新加载。在 Vue 项目中,history 模式通常用于前端路由,通过 vue-router 实现。


3. 🔧 两种模式的对比

URL表现:hash模式下URL包含#号,而history模式下URL更为简洁。

性能:history模式在部分浏览器中可能会有性能问题,如重复的history.pushState调用。

兼容性:hash模式兼容性更好,但history模式在现代浏览器中得到了广泛支持。


🌟 总结


在本篇文章中,我们详细解析了Vue路由的两种模式:hash模式与history模式。通过对比分析,我们应该对这两种模式有了更深入的了解。在实际开发中,根据项目需求和场景选择合适的模式,将使我们的Vue应用更加高效和优质。🚀


参考资料:


  1. Vue.js官方文档:路由
  2. Vue Router官方文档
相关文章
|
19天前
|
JavaScript
Vue中如何实现兄弟组件之间的通信
在Vue中,兄弟组件可通过父组件中转、事件总线、Vuex/Pinia或provide/inject实现通信。小型项目推荐父组件中转或事件总线,大型项目建议使用Pinia等状态管理工具,确保数据流清晰可控,避免内存泄漏。
154 2
|
3月前
|
JavaScript 安全
在 Vue 中,如何在回调函数中正确使用 this?
在 Vue 中,如何在回调函数中正确使用 this?
121 0
|
3月前
|
人工智能 JSON JavaScript
VTJ.PRO 首发 MasterGo 设计智能识别引擎,秒级生成 Vue 代码
VTJ.PRO发布「AI MasterGo设计稿识别引擎」,成为全球首个支持解析MasterGo原生JSON文件并自动生成Vue组件的AI工具。通过双引擎架构,实现设计到代码全流程自动化,效率提升300%,助力企业降本增效,引领“设计即生产”新时代。
259 1
|
4月前
|
人工智能 JavaScript 算法
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
584 0
|
6月前
|
JavaScript
vue实现任务周期cron表达式选择组件
vue实现任务周期cron表达式选择组件
787 4
|
4月前
|
JavaScript UED
用组件懒加载优化Vue应用性能
用组件懒加载优化Vue应用性能
|
5月前
|
JavaScript 数据可视化 前端开发
基于 Vue 与 D3 的可拖拽拓扑图技术方案及应用案例解析
本文介绍了基于Vue和D3实现可拖拽拓扑图的技术方案与应用实例。通过Vue构建用户界面和交互逻辑,结合D3强大的数据可视化能力,实现了力导向布局、节点拖拽、交互事件等功能。文章详细讲解了数据模型设计、拖拽功能实现、组件封装及高级扩展(如节点类型定制、连接样式优化等),并提供了性能优化方案以应对大数据量场景。最终,展示了基础网络拓扑、实时更新拓扑等应用实例,为开发者提供了一套完整的实现思路和实践经验。
558 77
|
6月前
|
缓存 JavaScript 前端开发
Vue 基础语法介绍
Vue 基础语法介绍
|
4月前
|
JavaScript 前端开发 开发者
Vue 自定义进度条组件封装及使用方法详解
这是一篇关于自定义进度条组件的使用指南和开发文档。文章详细介绍了如何在Vue项目中引入、注册并使用该组件,包括基础与高级示例。组件支持分段配置(如颜色、文本)、动画效果及超出进度提示等功能。同时提供了完整的代码实现,支持全局注册,并提出了优化建议,如主题支持、响应式设计等,帮助开发者更灵活地集成和定制进度条组件。资源链接已提供,适合前端开发者参考学习。
379 17