Vue-router(一) HelloWorld

因爲Vue在開發時對路由支持的不足，後來官方補充了vue-router插件，它在Vue的生態環境中很是重要，在實際開發中只要編寫一個頁面就會操做vue-router。要學習vue-router就要先知道這裏的路由是什麼？這裏的路由並非指咱們平時所說的硬件路由器，這裏的路由就是SPA（單頁應用）的路徑管理器。再通俗的說，vue-router就是咱們WebApp的連接路徑管理系統。

有的小夥伴會有疑慮，爲何咱們不能像原來同樣直接用<a></a>標籤編寫連接哪？由於咱們用Vue做的都是單頁應用，就至關於只有一個主的index.html頁面，因此你寫的<a></a>標籤是不起做用的，你必須使用vue-router來進行管理。

本文檔主要是一個Vue-router入門文檔，須要先查看「Vue-cli搭建項目」文檔，建立項目基礎上實現如下功能。

安裝vue-router

vue-router是一個插件包，因此咱們仍是須要用npm來進行安裝的。

在使用Vue-cli搭建項目時，有一個選項是選擇是否安裝vue-router的，若是已經安裝就不須要安裝了，若是未安裝須要在項目根目錄下經過執行如下命令進行安裝：

npm install vue-router --save-dev

若是你安裝很慢，也能夠用cnpm進行安裝。

解讀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   //對應的組件模板
    }
  ]
})

增長一個Hi的路由和頁面

在src/components目錄下，新建 Hi.vue 文件。

<template>
  <div>
    <h2>{{message}}</h2>
  </div>
</template>
<script>
export default {
  name: "Hi",
  data() {
    return {
      message : 'Wo Shi Hi!'
    };
  }
};
</script>
<style scoped>

</style>

在router/index.js文件的上邊引入Hi組件，並在router/index.js文件的routes[]數組中，新增長一個對象。

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
// 引入Hi
import Hi from '@/components/Hi'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    // 配置Hi對象
    {
      path: '/Hi',
      name: 'Hi',
      component: Hi
    }
  ]
})

完成以上信息就完成了一個新路由及新頁面編寫，啓動項目在瀏覽器中輸入

URL： http://localhost:8080/#/hi ，就能夠看到如下頁面，表示成功。

增統一的導航功能 

 在src/App.vue文件中的template里加入下面代碼，實現導航。

<!-- 導航 -->
    <div>
      <router-link to="/">Hello</router-link>
      <router-link to="/Hi">Hi</router-link>
    </div>

完成的src/App.vue文件內容爲：

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <!-- 導航 -->
    <div>
      <router-link to="/">Hello</router-link>
      <router-link to="/Hi">Hi</router-link>
    </div>
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

完成以上信息就完成了一個導航編寫，啓動項目在瀏覽器中輸入

URL： http://localhost:8080/，就能夠看到如下頁面，在頁面中就多了導航菜單連接，表示成功。

點擊Hello進入Hello頁面，點擊Hi,進入Hi頁面

router-link

連接<router-link>標籤

<router-link to="/">[顯示字段]</router-link>

• to：是咱們的導航路徑，要填寫的是你在router/index.js文件裏配置的path值，若是要導航到默認首頁，只須要寫成  to="/"  ，
• [顯示字段] ：就是咱們要顯示給用戶的導航名稱，好比首頁  新聞頁。