介紹

vue-router是Vue.js官方的路由外掛，它和vue.js是深度整合的，適合用於構建單頁面應用。vue的單頁面應用是基於路由和元件的，路由用於設定訪問路徑，並將路徑和元件對映起來。傳統的頁面應用，是用一些超連結來實現頁面切換和跳轉的。在vue-router單頁面應用中，則是路徑之間的切換，也就是元件的切換。
本文是基於上一篇文章（Vue學習筆記進階篇——vue-cli安裝及介紹）vue-cli腳手架工具的。

安裝

在終端通過cd命令進入到上一篇文章中建立的my-demo1專案目錄裡，然後使用以下命令進行安裝:

npm install vue-router 
 
--save

--save引數的作用是在我們的包配置檔案package.json檔案中新增對應的配置。安裝成功後， 可以檢視package.json檔案，你會發現多了"vue-router": "^2.7.0"的配置。如下：

"dependencies":{
"vue":"^2.3.3",
"vue-router":"^2.7.0"
},

使用

通過以上步驟，我們已經安裝好了vue-router，但是在vue-cli中我們如何使用呢？
首先，我們需要在main.js檔案中匯入並註冊vue-router:

//ES6語法匯入
importVueRouter from 'vue-router'
 
//註冊
Vue.use(VueRouter)

然後便是例項化：

const router =newVueRouter({
  mode:'history',
  routes:[
{path:'/', component:DemoHome},
{path:'/about', component:DemoAbout},
{path:'/contact', component:DemoContact}
]
})

path: 是路由的路徑。
component: 是該路由需要渲染的元件。
上面程式碼中的DemoHome, DemoAbout, DemoContact都是單檔案元件，所以我們同樣需要建立上面三個元件，並匯入到當前檔案。這三個元件我們只是作為示例來使用，所以比較簡單，程式碼分別如下:

• DemoHome.vue:

<template>
<divid="home">
<h2>this is home</h2>
</div>
</template>
<script>
exportdefault({
    name:'home'
})
</script>
<stylescoped>
#home{
    width:100%;
    height:500px;
    background-color: khaki;
}
</style>

• DemoAbout.vue:

<template>
<divid="about">
<h2>this is about</h2>
</div>
</template>
<script>
exportdefault({
    name:'about'
})
</script>
<stylescoped>
#about{
  width:100%;
  height:500px;
  background-color: antiquewhite;
}
</style>

• DemoContact.vue:

<template>
<divid="contact">
<h2>this is contact</h2>
</div>
</template>
<script>
exportdefault({
    name:'contact'
})
</script>
<stylescoped>
#contact{
    width:100%;
    height:500px;
    background-color: lightskyblue;
}
</style>

建立好以上元件後，再使用ES6語法匯入到main.js:

importDemoHomefrom'./components/DemoHome'
importDemoAboutfrom'./components/DemoAbout'
importDemoContactfrom'./components/DemoContact'

最後在Vue例項中加入路由屬性就可以了

newVue({
  el:'#app',
  router,
template:'<App/>',
  components:{App}
})

完整的main.js應該是這樣：

importVuefrom'vue'
importVueRouterfrom'vue-router'
importAppfrom'./App'
importDemoHomefrom'./components/DemoHome'
importDemoAboutfrom'./components/DemoAbout'
importDemoContactfrom'./components/DemoContact'
Vue.use(VueRouter)
Vue.config.productionTip =false