VUE:vue-router介绍

一、vue-router工作原理

单页面应用（SPA）的核心思想之一，就是更新视图而不重新请求页面，简单来说，它在加载页面时，不会加载整个页面，只会更新某个指定的容器中的内容。对于大多数单页面应用，都推荐使用官方支持的vue-router。

在实现单页面前端路由时，可通过mode参数决定hash模式与history模式两种模式

1、hash模式

使用URL的hash来模拟一个完整的URL，当URL改变时，页面不会重新加载。#就是hash符号，中文名为哈希符或者锚点，在hash符号后的值，称为hash值。

路由的hash模式是利用了window可以监听onhashchange事件来实现的，也就是说hash值是用来指导浏览器动作的，对服务器没有影响，HTTP请求中也不会包括hash值，同时每一次改变hash值，都会在浏览器的访问历史中增加一个记录，使用“后退”按钮，就可以回到上一个位置。所以，hash模式是根据hash值来发生改变，根据不同的值，渲染指定DOM位置的不同数据。

2、history模式

history模式不会出现#号比较美观，这种模式充分利用history.pushState()来完成URL的跳转而且无须重新加载页面。使用history模式时，需要在路由规则配置中增加mode:‘history’，示例代码如下。

// main.js文件
const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

二、 vue-router基本使用

三个基本概念

• route ：表示它是一条路由，单数形式
• routes：表示它是一组路由，把route的每一条路由组合起来，形成一个数组
• router：表示它是一个机制，充当管理路由的管理者角色

案例演示：

①、下载并引入vue.js和vue-router.js文件

首先从官方网站获取vue.js和vue-router.js文件，保存到文件目录中。其次创建html文件，并在文件中引入这两个文件，示例代码如下。

<script src="vue.js"></script>
<script src="vue-router.js"></script>

提示：在引入vue-router.js之前，必须先引入vue.js，因为vue-router需要在全局Vue的实例上挂载vue-router相关的属性。

②、编写HTML结构代码

<div id="app">
  <router-link to="/login" tag="span">前往登录</router-link>
  <router-view></router-view>
</div>

router-link 标签支持路由导航功能
router-view 充当占位符

③、编写JavaScript逻辑代码

var login = { // 创建组件
  template: '<h1>登录组件</h1>'
}
var routerObj = new VueRouter({[ // 配置路由匹配规则
  routes: {path: '/login', component: login} ]
})
var vm = new Vue({
  el: '#app',
  router: routerObj // 将路由规则对象注册到vm实例上
})

④、在浏览器中打开文件，会看到页面中只有“前往登录”这4个字，单击“前往登录”，就会在下方出现“登录组件”，效果如下图所示。

在创建的routerObj对象中，如果不配置mode，就会使用默认的hash模式，该模式下会将路径格式化为#开头。添加mode:'history’之后，将使用HTML5 history模式，该模式下没有#前缀。component的属性值，必须是一个组件的模板对象，不能是组件的引用名称。

三、路由对象属性

路由对象（route object）表示当前激活的路由的状态信息，包含了当前URL解析得到的信息，还有URL匹配到的路由记录。路由对象是不可变的，每次成功地导航后都会产生一个新的对象。

this.$router表示全局路由器对象，项目中通过router路由参数注入路由之后，在任何一个页面都可以通过此属性获取到路由器对象，并调用其push()、go()等方法。this.$route表示当前正在用于跳转的路由对象，可以访问其name、path、query、params等属性。

路由对象$route的常用属性信息如下表。