Vue--配置路由步骤

首先我来说说，为什么项目中需要使用路由，通常我们跳转页面的话，页面都需要刷新进行HTTP请求，如果我们采用路由机制的话，页面不会进行刷新，减轻了服务器的负担。

本篇文章主要是用过一个小Demo来实现路由的搭建

在搭建路由之前，我们需要在项目的根目录下打开终端，进行路由模块的安装，输入

npm install vue-router --save-dev

安装好路由后重启项目，进行路由的搭建

①在main.js文件中引入路由，使用路由

这个格式通常是固定的，一般是：import VueRouter from 'vue-router'

使用路由模块

Vue.use(VueRouter)

②在main.js文件中配置路由

//配置中的参数通常是固定的
    const router = new VueRouter({
      routes: [
        {path: "/",component:Home},
        {path: "/helloworld", component: HelloWorld}
      ],
      mode: 'history'    
    })

mode: ‘history’ 的作用主要是把默认的#去除，通过情况在项目中都会加
routes中绑定所设置的路径以及相应的组件名称

③将注册好的router实例添加到我们Vue的根目录之中

④使用我们所注册的路由

这里我们直接使用我在所配置好的组件，一个是Home和HelloWorld为所跳转的页面。

  <router-link to="/">Home</router-link>的作用就是进行页面的跳转
  通过<router-link>组件的to属性来设置跳转的链接

到这里路由基本就搭建好了，页面的组件的引用在这里没有做详细的介绍。
最后，在这里给一个小小建议，node版本6.9以上，npm版本3.0以上。