[TOC] # 安裝vue-router vue-router是一個插件包，所以我們還是需要用npm來進行安裝的。打開命令行工具，進入你的項目目錄，輸入下面命令 ~~~ npm install vue-router --save-dev ~~~ 如果你安裝很慢，也可以用cnpm進行安裝，如果你在使用vue-cli中已經選擇安裝了vue-router，那這里不需要重復安裝了 # router/index.js文件 我們用vue-cli生產了我們的項目結構，你可以在src/router/index.js文件，這個文件就是路由的核心文件 ~~~ import Vue from 'vue' //引入Vue import Router from 'vue-router' //引入vue-router import Hello from '@/components/Hello' //引入根目錄下的Hello.vue組件 Vue.use(Router) //Vue全局使用Router export default new Router({ routes: [ //配置路由，這里是個數組 { //每一個鏈接都是一個對象 path: '/', //鏈接路徑 name: 'Hello', //路由名稱， component: Hello //對應的組件模板 } ] }) ~~~ 上邊的代碼中已經對每行都進行了注釋，其實在這個路由文件里只配置了一個功能，就是在進入項目時，顯示Hello.vue里邊的內容代碼 # 增加一個Hi的路由和頁面 對路由的核心文件熟悉后，我們試著增加一個路由配置，我們希望在地址欄輸入 http://localhost:8080/#/hi 的時候出現一個新的頁面 看到了效果，我們看一下具體的操作步驟： * 在src/components目錄下，新建 Hi.vue 文件。 * 編寫文件內容，和我們之前講過的一樣，文件要包括三個部分`<template><script>`和`<style>`。文件很簡單，只是打印一句話 ~~~ <template> <div class="hello"> <h1>{{ msg }}</h1> </div> </template> <script> export default { name: 'hi', data () { return { msg: 'Hi, jdxia' } } } </script> <style scoped> </style> ~~~ * 引入 Hi組件：我們在router/index.js文件的上邊引入Hi組件 ~~~ import Hi from '@/components/Hi' ~~~ * 增加路由配置：在router/index.js文件的routes[]數組中，新增加一個對象，代碼如下 ~~~ { path:'/hi', name:'Hi', component:Hi } ~~~ 通過上面的配置已經可以增加一個新的頁面了 ~~~ import Vue from 'vue' //引入Vue import Router from 'vue-router' //引入vue-router import Hello from '@/components/Hello' //引入根目錄下的Hello.vue組件 import Hi from '@/components/Hi' Vue.use(Router) //Vue全局使用Router export default new Router({ routes: [ //配置路由，這里是個數組 { //每一個鏈接都是一個對象 path: '/', //鏈接路徑 name: 'Hello', //路由名稱， component: Hello //對應的組件模板 },{ path:'/hi', name:'Hi', component:Hi } ] }) ~~~ 上面有vue圖片是因為在App.vue ~~~ <template> <div id="app"> <img src="./assets/logo.png"> <router-view/> </div> </template> ~~~ 所有的路由都在img下面 # router-link制作導航 現在通過在地址欄改變字符串地址，已經可以實現頁面內容的變化了。這并不滿足需求，我們需要的是在頁面上有個像樣的導航鏈接，我們只要點擊就可以實現頁面內容的變化。制作鏈接需要`<router-link>`標簽，我們先來看一下它的語法。 ~~~ <router-link to="/">[顯示字段]</router-link> ~~~ 1. to：是我們的導航路徑，要填寫的是你在router/index.js文件里配置的path值，如果要導航到默認首頁，只需要寫成 to=”/” ， 2. [顯示字段] ：就是我們要顯示給用戶的導航名稱，比如首頁 新聞頁 明白了router-link的基本語法，我們在 src/App.vue文件中的template里加入下面代碼，實現導航 ~~~ <p>導航 ： <router-link to="/">首頁</router-link> <router-link to="/hi">Hi頁面</router-link> </p> ~~~