关于路由

路由（routing）是指从源到目的地时，决定端到端路径的决策过程。 对于VueRouter而言，路由就是根据一个请求路径选中一个组件进行 渲染的决策过程：

VueRouter包括三个主要组成部分 —— VueRouter、router-view和 router-link：

• VueRouter ：路由器类，根据路由请求在路由视图中动态渲染选中的组件

• router-link ：路由链接组件，声明用以提交路由请求的用户接口

• router-view：路由视图组件，负责动态渲染路由选中的组件

路由器完全依赖于其路由表进行路由决策，因此，在创建路由器实例时，我们需要 对所有可能的路由（从路径向组件的映射关系）进行配置。

Hello, VueRouter

开发一个VueRouter版的hello,world只需要四步：

1、创建路由器实例

路由器完全依赖于路由表来分发路由请求，因此创建路由器实例时，需要使用routes配置项来声明请求路径（path）和组件（component）的对应关系 —— 记录这一映射关系的对象，在VueRouter中被称为路由记录（RouteRecord）。 路由器将根据routes路由记录数组来构造路由表。

例如，下面的代码创建了包含两条路由及记录的路由器实例router：

 const router = new VueRouter({      routes:[                { path:'/', component: EzHome},                { path:'/about', component: EzAbout}                ] }) 

当请求路径/时，路由器将选中组件EzHome；当请求路径/about时，路由器 将选中组件EzAbout。

2、将路由器注入Vue实例

如果在一个Vue实例的模板中需要使用router-link和router-view组件，我们需要首先向这个Vue实例注入路由器对象，因为这两个组件都依赖于路由器对象：

在创建Vue实例时，使用router配置项将路由器对象注入Vue实例的$router属性，例如：

const router = new VueRouter({...}) const vm = new Vue({ router: router }) console.log(vm.$router) //输出router 

3、声明路由出口

路由视图组件（router-view）为路由器（$router）提供了所选中组件 的渲染出口。在模板中，使用标签<router-view>声明路由视图元素。

例如，下面示例在模板中声明了一个路由视图：

<router-view></router-view> 

声明路由请求接口

路由链接组件（router-link）为用户提供了提交路由请求的交互接口。 使用to属性来声明链接组件的目标路径。当用户点击链接组件时，组件 向路由器提交向目标路径的路由请求。在模板中，使用<router-link> 标签声明路由链接元素。

例如，下面的示例声明了一个目标路径为/about的路由链接：

<router-link to="/about">ABOUT</router-link> 

路由链接组件默认渲染为一个a元素，因此在视图DOM中，上面的模板对应于DOM结构：

<a href="...">ABOUT</a> 

路由链接组件的激活样式类

成组的链接组件用来做组件的导航再合适不过了。VueRouter贴心地为选中的路由链接元素添加了激活样式类来帮助我们醒目地展示激活的链接：

router-link-active

激活的router-link组件自带样式类router-link-active。因此我们可以利用 这个样式类来为赋予选中的链接组件不同的外观：

是否为链接组件添加router-link-active样式类的默认判别规则是：链接组件的 目标路径（to属性值）是否包含当前激活路由的路径（$route.path）。因此在上图中，当激活BLOGS链接元素（目标路径：/blogs）时，HOME链接元素（目标路径：/）也被添加了router-link-active 样式类 —— 路径/包含了所有以/开头的路径!

有两个方案解决这一问题：

• 为目标路径为/的链接组件应用exact属性，要求VueRouter只有在精确匹配 （to属性值与$router.path完全相等）时才添加router-link-active样式类

• 使用router-link-exact-active样式类

router-link-exact-active

只有当链接组件的目标路径精确匹配活动路由的路径时，链接组件才会被添加router-link-exact-active样式类：

使用命名路由

在配置路由记录时，也可以利用name属性，将其声明为命名路由。 例如，下面的路由记录声明了一条名为about的命名路由：

{path:'/about',component:EzAbout,name:'about'} 

router-link组件也支持使用名称来声明目标路由。不过，我们需要将to属性使用v-bind指令绑定到对象形式的字面量，否则将被视为 字符串。

例如，下面的模板使用对象字面量设置链接组件的to属性，根据之前 的路由记录，下面的三种写法是等效的：

<router-link to="/path">ABOUT</router-link> <router-link :to="{name:'about'}">ABOUT</router-link> <router-link :to="{path:'/about'}">ABOUT</router-link> 

这种对象形式的目标路由声明，在VueRouter里被称为定位对象（Location）。 路径形式的路由请求，也将被转化为定位对象再进行路由匹配。

路由匹配算法概述

路由器实例化时，根据routes配置项声明的路由记录数组，构造两张核心路由表：pathMap和nameMap，分别以路径（例如：/about）和 路由名（例如：about）为键，以规范处理后的路由记录为值，来实现路由 的快速匹配。

当路由器接收到一个路由请求时（例如，点击router-link组件），路由器 将根据请求的定位对象是否包含name属性，分别查找nameMap 和pathMap这两张路由表来进行路由查找：

很显然，使用nameMap表进行命名路由的匹配只需要一步，而使用pathMap进行路径匹配则 （最坏情况下）需要遍历整个路由表，利用每一个路径模式来尝试匹配请求路径。因此在可能 的情况下，都应当使用命名路由。

路由重定向和别名

也可以在路由记录中声明从一个路径到另一个路径的映射—— 路由重定向。 例如，下面的路由记录声明了从路径/archives向路径/blogs的重定向：

{path: '/archives' , redirect:'/blogs'} 

对于上例的路由配置，当路由器匹配了对路径/archives的请求时，将再度 继续执行对路径/blogs的匹配：

重定向路由记录的声明也支持使用命名路由。例如，下面的示例将路径/archives 重定向到命名路由blogs —— 对于命名路由，我们只能采用定位对象的写法：

{path:'/archives', redirect:{name:'blogs'}} 

路径别名

别名（alias）用来为一个路径创建另一个访问点。例如，下面的路由记录 为路径/blogs创建了别名路径/：

{path:'/blogs',component: EzBlogs , alias:'/archives'} 

当路由器匹配了对根路径/的路由请求时，不会再继续匹配路径/blogs， 而是直接根据所选中路由记录的声明，构造路由信息对象，渲染EzBlogs组件。

redirect vs. alias

重定向（redirect）和别名（alias）最大的区别在于：重定向请求的路径 和实际激活的路径是不同的，而别名的请求路径和激活路径是一致的：

更多的vue-router实战示例内容可以到汇智网(www.hubwiz.com，本文内容来自汇智网，边学边练，所学所见。