这也是router默认使用的路由方式。不过，这种方式有一个弊端，就是在接入第三方的支付的时候，我们传入一个url给到第三方支付作为回调地址，但是在支付完成以后，有的第三方支付会把我们的#作为一个截取符号，仅保留第一个#符号前面的url内容，后面再添加相应的回调参数。导致支付完成以后无法跳转到相应的支付页面
传入的url:
http://xx.xx.com/#/pay/123
回调后的地址:
http://xx.xx.com/pay/123?data=xxxxx%xxxx
2.history模式
还有一种就是history的模式。它是使用h5的history.pushState来完成URL的跳转的。使用这种方式来处理跳转的好处就是，url和我们平常看到的没有什么区别。和hash模式作比较的话就是没有了#。不过使用history模式，我们在后台也要去做相应的处理，因为如果直接去访问一个地址，例如http://www.xxxx.com/user/id的时候，如果后端没有配置的时候，后端就会返回404页面。
4.router-link在循环中this.参数名=undefined
<router-link>组件是我们在view层中需要用到的跳转组件。它替代了<a>标签需要做的事情，并且帮助我们做了更多的事情。
无论是 h5 history 模式还是 hash 模式，它的表现行为一致，所以，当你要切换路由模式，或者在 IE9 降级使用 hash 模式，无须任何变动。
在 HTML5 history 模式下，router-link 会守卫点击事件，让浏览器不再重新加载页面。
当你在 HTML5 history 模式下使用 base 选项之后，所有的 to 属性都不需要写（基路径）了。
不过当我们在v-for的循环中使用了router-link的时候，一般来说，我们需要取的都是循环里的值，通过定义的item.xxx就可以取到。如果说需要取一个我们在data中定义的值的时候，我们是通过this.foo来取呢？还是通过foo来取呢？还是都可以？
这里的话，我们是不能通过this.foo来取的，因为这里的this,不再是指向vue的实例了，而是指向了[object Window]。所以用this.foo来取的话，其实是undefined.
<router-link tag="li" :to="{path:`/user/${item.userID}`}" v-for="(item, index) in userList" :key="index">
//含有固定的值
<p>{{this.foo}}</p>
<p>{{foo}}</p>
</router-link>
data(){
return {
foo:'bar',
}
}4.vue-router配合axios的使用
初次接触拦截器这个概念是在java中，通过拦截器，我们可以对用户的登录状态进行更加粒度的操作。而对于一个SPA的应用来说，没有了后台路由的介入，我们就需要在前端实现一套自己的登录状态的管理机制。
最直观的一点就是，通过用户的token来判断用户是否登录？
