vue-router使用 看着篇就夠了

官網地址： https://router.vuejs.org/zh/

先來個自我介紹吧，我就是大家口中的路由，個人做用就是告訴大家怎麼到達某地，好比你想去一個地方（前提是這個地方是已經存在的）我會查詢個人路線圖（路由配置）告訴你怎麼過去。明白了吧，個人做用就是給大家導航的，有了個人存在，大家不用在詳細的記住每一條路線圖，只須要記住要去的目的地名字就好了，至於怎麼過去，那是個人事，你就不用操心了，徹底按照個人指示就能又快有準的到達目的地。

對了，我還有三個助手，他們分別是：
1.router ：這位是個人指令官，他管理着全部的 route，當你須要指路時，他會召集全部的route，到routes集合，而後一個一個詢問誰知道路線，直到找到那個route。若是找到了那個知道路線的route，router就派出他去爲你導航，直至把你送到目的地。
2.routes：全部的路線route都在這裏存放。
3.route：看名字也知道我是單數了，能力有限，我只能存放一條路線圖。
認識了個人三位助手，對我也有個簡單的認識了，下面進入實操環節。

--------分割線-----------
一：vue-router 初級應用
最終指望：在首頁中點擊對應的鏈接進入對應的組件。
在 components中新建三個組件 分別是：A、B、C
A.

<template>
  <div class="hello">
    <ul>
      <li>
        {{name}}
      </li>      
    </ul>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      name: 'my name is A!'
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

B.

<template>
  <div class="hello">
    <ul>
      <li>
        {{name}}
      </li>      
    </ul>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      name: 'my name is B!'
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

C.

<template>
  <div class="hello">
    <ul>
      <li>
        {{name}}
      </li>      
    </ul>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      name: 'my name is C!'
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

配置路由：
/router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import A from '@/components/A'
import B from '@/components/B'
import C from '@/components/C'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/A',
      name: 'A',
      component: A
    },
    {
      path: '/B',
      name: 'B',
      component: B
    },
    {
      path: '/C',
      name: 'C',
      component: C
    }
  ]
})

在 HelloWord.vue中引入A、B、C三個組件的鏈接

<template>
  <div class="hello">
    <ul>
      <li>
        <a href="/#/A">A</a>
      </li>     
      <li>
        <a href="/#/B">B</a>
      </li>   
      <li>
        <a href="/#/C">C</a>
      </li>           
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

運行命令：npm run dev
打開網站運行一下：

到這裏vue-router的初級應用就介紹完了，總結下，有三個部分的知識點
1.定義三個組件 A、B、C
2.在router/index.js文件中引入三個組件，並作相應的路由配置
3.在頁面中添加3個a標籤，分別跳轉到對應的組件
這部份內容比較初級，只是對路由作了簡單的演示，經過定義好的路由進入對應的組件，在咱們平時開發中，涉及到的需求要比這複雜的多，後面的內容會慢慢加深難度，接下來開始講解vue-router的進階版：vue-router 中級應用，這部份內容分三個小節：
1.怎麼動態定義路由
2.路由中怎麼傳遞參數
3.路由命名有什麼用