Vue--配置路由步驟

首先我來講說，爲何項目中須要使用路由，一般咱們跳轉頁面的話，頁面都須要刷新進行HTTP請求，若是咱們採用路由機制的話，頁面不會進行刷新，減輕了服務器的負擔。

本篇文章主要是用過一個小Demo來實現路由的搭建

在搭建路由以前，咱們須要在項目的根目錄下打開終端，進行路由模塊的安裝，輸入

npm 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以上。