Vue入门（五）——vue-route

vue的路由这部分知识点是相当重要的，我们进行页面跳转显示的时候，靠的就是路由。
这里我就不介绍前后端的发展过程了，我只说vue就是做前端的，网络请求与路由的区别，网络请求，我放在promise中说。

比如什么图片、css、html都做好了封装到一个模板当中，然后我们的url请求那个页面，我们的路由将会根据这个请求去指定的模板中加载资源，如果这个模板中用了别的数据，需要中数据库中拿到，这个时候就会发送网络请求，请求数据，然后返回给模板，最后显示出来。

首先说一下，html有两种模式的请求，一种是hash，一种是history。
默认情况下，改变的是URL的hash。他们之间的区别在于hash里面的url有#，但是history里面没有#。我们改变的方式是：

但是我们怎么使用路由呢？

首先我们需要的是安装路由，之前我们已经学习了webpack。所以第一步就是安装我们的路由：npm install vue-router --save 。第二步就是使用路由，因为我们的路由是一个插件，所有我们要在工程中说明我们要使用这个路由，不然我们直接用是不行的。分下面三步：

但是怎么使用路由呢？

上面这些知识在使用路由的时候怎么进行使用，但是我们首先在main.js中去注册，我们这个项目中要使用。具体怎么弄，后面说

这些基础知识说完后，路由里面到底怎么使用，里面不能不提的重点就是route-link和route-view.

<route-link to="/home">首页</route-link>
<route-view/>

上面的代码很容易看出来route-link就是我们使用的a标签，route-view就是我们之前的插槽功能差不多，就是用来用作显示用的，

下面展示一下，到底如何用的route：

下面关于route-link的一些补充：

路由代码跳转：

有时候我们可能会遇到在传递数据的时候会有动态传递id，如下面：



如何动态获取url地址里面的值：

如何添加子路由，就是在一个跳转页面下面在进行跳转：

跳转页面里面怎么写呢？

当我们传递数据的时候，如果传递的数据比较多的情况下，我们通常使用的方式是：query：这里可以传递多个参数

注意：route和router的区别：

$router为VueRouter实例，想要导航到不同的URL，则是使用$router.push的方法。
$route为 当前router跳转对象里面可以获取name、path、query、params等。

**

导航守卫使用

**
其实导航守卫就是为了修改标题


还有一个知识点要说就是关于keep-alive，这个组件的作用就是保留状态，避免重新渲染。

具体使用如下：

上面的是关于Vue-route的简单介绍。