Spring Boot+Vue前后端分离商城实战(十二)Vue 前端路由介绍

Vue-Router 是什么

简介

单页面开发模式的路由全权交由前端来控制,这里的路由不是我们说的路由器等硬件设备,它是前端的路径管理器。而 Vue-Router 是官方提供的路由插件,市面上也不乏路由管理插件,但是只有 Vue-Router 能和 Vue 深度集成完美搭配。

单页面与传统页面跳转的区别

  • 单页面

Vue 的单页面开发模式是基于组件和路由的配合,所有的页面均可视为组件,路由控制着访问路径,而每个路径映射一个组件。在单页模式中使用 a 标签做路由跳转是行不通的,因为本质上单页模式就只有一个 index.html 页面,所有的页面组件都在打包好的 JS 文件中,所以要使用 Vue-Router 的路由组件来跳转,这里的原因在后文中会有具体的例子解析。

  • 传统页面

传统页面的开发模式,路由一般是由超链接(a 标签)来控制页面的跳转与切换,每次都会刷新整个页面,体验上不如单页模式。

Vue-Router 路由模式

Vue-Router 为我们提供了三种路由模式:

  • Hash模式
  • History模式
  • abstract模式

Hash模式

Hash 模式是 Vue-Router 的默认模式,具体的体现是在浏览器地址栏上 URL 路径永远带着一个「#」号。在浏览器支持度上面,Hash 模式是比较强势的,甚至能兼容低版本的 IE 浏览器。「#」号后面内容的

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章