Vue路由

Vue中的路由允许使用不同的URL来访问不同的内容。

路由的安装和使用

路由对象的常用属性

使用动态路由进行路由匹配、路由嵌套、命名视图和命名路由的方法

使用Vue-router实例方法实现编程式导航的参数传递及获取

1.初始路由

提到路由，大家一般会想到生活中常见的路由器，路由器主要用于连接多个逻辑上分开的网络，逻辑网络代表一个单独的网络或者一个子网，可以通过路由器功能来完成不同网络之间数据的传递。

在Vue中也引入了路由的概念，因此，我们先来对程序开发中的路由进行简单地了解。

程序开发中的路由分为后端路由和前端路由。

1.1后端路由

后端路由由通过用户请求的URL分发到具体的处理程序，浏览器每次跳转不同的URL，都会重新访问服务器。

服务器收到请求后，将数据和模板组合，返回HTML页面，或者直接返回HTML模板，由前端JavaScript程序再去请求数据，使用前端模板和数据进行组合，生成最终的HTML页面。

1.2前端路由

前端路由就是把不同路由对应不同的内容或页面的任务交给前端来做。

前端路由和后端路由的原理是类似的，但是实现的方式不一样

对于单页面应用(Single Page Application)来说，主要通过URL中的hash(#号)来实现不同页面之间的切换。

hash有一个特点，就是HTTP请求中不会包含hash相关的内容所以单页面程序中的页面跳转主要用hash来实现。

2.Vue-router

vue-router是Vue官方推出的路由管理器，主要用于管理URL，实现URL和组件的对应，以及通过URL进行组件的之间的切换，从而使构建单页面应用变得更加简单

2.1Vue-router的工作原理

单页面应用(SPA)的核心思想之一，就是更新视图而不重新请求页面，简单来说，它在加载页面时，不会加载整个页面，只会更新某个指定的容器中的内容。

在实现单页面前端路由时，提供了两种方式，分别是hash模式和history模式，根据mode参数来决定采用哪一种方式。

hash模式

vue-router默认为hash模式，使用URL的hash来模拟一个完整的URL，当URL改变时，页面不会重新加载。

#就是hash符号，中文名为哈希符或者锚点，在hash符号后的值称为hash值。

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

所以，hash模式是根据hash值来发生改变，根据不同的值，渲染指定DOM位置的不同数据。

history模式

hash模式的URL中会自带#号，影响URL的美观，而history模式不会出现#号，这种模式充分利用了history.pushState()来完成URL的跳转，而且无须重新加载页面。

使用history模式时，需要在路由规则配置中增加mode:’history’

2.2vue-router的基本使用

vue-router可以实现当用户单击页面中的A按钮时，页面显示内容A；单击B按钮时，页面显示内容B

学习vue-router的基本使用前，需要了解路由中3个基本的概念：route、routes、router

route：表示它是一条路由，单数形式。

routes：表示它的一组路由，把route的每一条由组合起来，形成一个数组。

router：它是一个机制，充当管理路由的管理者角色。因为routes只是定义了一组路由，那么当用户单击A按钮的时候，需要做什么呢？这时router就起作用了，它需要到routes中去查找对应的A内容，然后在页面中显示出A内容。

2.3路由对象的属性

路由对象(route object)表示当前激活的路由的状态信息，包含了当前URL解析得到的信息，还有URL匹配到的路由记录。

路由对象是不可变的，每次成功地导航后都会产生一个新的对象。

this.$router表示全局路由器对象，项目中通过router路由参数注入路由之后，在任何一个页面都可以通过此属性获取到路由器对象，并调用其push()、go()等方法。

this.$route表示当前正在用于跳转的路由对象，可以访问其name、path、query、params等属性。

$route常用属性