轻松搞定vue路由

一、前言

        说到vue路由，先讲一下SPA的概念，Single Page Application单页面应用，即一个网站的所有页面都集中在一个html内，通过切换div模拟页面的切换，优点显然易见：实现资源共享，前后端分离，页面切换丝滑流畅。缺点就一个，对搜索引擎不太友好，这一点目前在技术上也正在弥补，优点是越来越突出。

        Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。路由实际上就是可以理解为指向，就是我在页面上点击一个按钮需要跳转到对应的页面，这就是路由跳转。在这里理解三个词的区别：

        route：首先它是个单数，译为路由，即我们可以理解为单个路由或者某一个路由；

        routes：它是个复数，表示多个的集合才能为复数；即我们可以理解为多个路由的集合，JS中表示多种不同状态的集合的形式只有数组和对象两种，事实上官方定义routes是一个数组；所以我们记住了，routes表示多个数组的集合；

        router：译为路由器，上面都是路由，这个是路由器，我们可以理解为一个容器包含上述两个或者说它是一个管理者，负责管理上述两个；举个常见的场景的例子：当用户在页面上点击按钮的时候，这个时候router就会去routes中去查找route，就是说路由器会去路由集合中找对应的路由。

        了解了vue路由是干什么的，接下来看看怎么安装。

二、vue-router安装

        路由分两种：

        hash路由：锚点（hash）变化不会刷新页面，常用事件 window.onhashchange;

        历史记录路由：属于H5新增特性，常用history.onpopstate。

        本文重点讲解hash路由。直接上图给安装教程。

3.X刚出不久，主流还是2.x

新手建议选择n,多练练，等熟悉了再保存预设。

        以上创建了一个myroute项目，在HBuilder中打开如下图：

 三、运作原理

1、内置组件

        打开src目录下的App.vue

        router-link 改变地址栏，改变hash值，页面会进行切换；

        router-view 存放要切换的页面

2、运作原理

        可用一幅图展示一下

注意，图中的index.js是在router目录下，属于路由配置的内容。

三、路由配置

1、普通配置

        通常是主页面导航栏使用

2、路由传参

        一般用来解决同一内容多页面问题，如电商网站中的产品

3、子路由配置

        解决非主页面的导航实现问题

 

        经过以上几点，可以实现搭建简单的网页 ，搞清楚之后，就可以进行深一步的学习了。