Vue-router详解

一、认识vue-router

1.目前前端流行的三大框架，都有自己的路由实现

    Angular的ngRouter
    React的ReactRouter
    Vue的vue-router
2.vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。
   我们可以访问其官方网站对其进行学习：https://router.vuejs.org/zh/

3.vue-router是基于路由和组件的

   路由用户设定访问路径的，将路径和组件映射起来。
   在vue-router的单页面应用中，页面的路径的改变就是组件的切换

二、路由的默认路径

默认情况下，进入网站的首页，我们希望渲染首页的内容。
但是我们的实现中，默认没有显示首页组件，必须让用户点击才可以。

如何可以让路径默认跳转到首页，并且渲染首页组件呢？
我们需要多配置一个映射就可以了

{
  path: '/',
  redirect: '/home'
},

配置解析：

• 我们在routes中又配置一个映射
• path配置的是根路径：/
• redirect是重定向，也就是我们将根路径重定向到/home的路径下，这样就可以得到我们想要的结果了。

三、HTML5的History模式

改变路径的方式有两种：

• URL 的 hash
• HTML5 的 history
• 默认情况下，路径的改变使用的URL的 hash

 如果希望使用HTML5的history模式，进行如下的配置：

 四、router-link属性介绍

• to：用于指定跳转的路径
• tag：tag可以指定<router-link>之