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 浏览器。「#」号后面内容的