頁面的跳轉，在html裡都是通過a元素來進行頁面跳轉的，href指定的連結就相當於指定了跳轉的路由。

而在vue的單頁面應用中，這裡的路由本質上是進行了頁面重渲染。

在入口main.js裡面已經將router裝載進專案了。

1、在定義新的路由之前，先定義一個跳轉的自定義元件。在src/components下新建一個Hello.vue

<template>
  <div class='hello'>{{msg}}</div>
</template>

<script>
export default {              //這個標誌提供給外部引用
  name: 
 
'Hello',
  data () {
    return {
      msg: 'Hello my first component!'
    }
  },
}
</script>
<style>
.hello{
  color: rgb(0, 38, 255)
}
</style>

2、元件是可以引入其他元件的，比如在建立一個元件叫HelloHello

<template>
    <hello></hello>    //最後在元件的template中使用元件
</template>

<script>
import Hello 
 
from '@/components/Hello'      //import來匯入元件，，最後在元件的template中使用元件
export default {
  name: 'HelloHello',
  components: {                             //用components來宣告使用元件
    Hello
  }
}
</script>

3、元件弄好了，那就來定義一個新的路由，開啟router資料夾下的index.js檔案。

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld 
 
from '@/components/HelloWorld'
import HelloHello from '@/compoonets/HelloHello'          //引入元件

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',                                    
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/HelloHello',                       //定義路由
      name: 'HelloHello',                        //路由名稱
      component: HelloHello                      //繫結跳轉元件
    }
  ]
})

4、在根元件app.vue中使用<router-link></router-link> 元素進行路由跳轉繫結

<template>
  <div id="app">
    <img src="./assets/logo.png">
     <router-view></router-view>
    <router-link  to="/HelloHello">HelloHello</router-link>
    <router-link  to="/">HelloWorld</router-link>
  </div>
</template>

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

生成一下，發現有一些錯誤。程式碼上的要求挺嚴格

修改完成後，點選HelloHello顯示Hello的元件，點選HelloWorld顯示HelloWorld元件的內容。

5、動態路徑引數，顧名思義就是在路由指定某些引數，類似於http://www.baidu.com/1234這種

定義路由時指定引數名id,格式是冒號+引數名

 {
      path: '/hellohello/:id',
      name: 'HelloHello',
      component: HelloHello
    }

使用：this.$route.params.引數名 來獲取引數。在HelloHello.vue裡新增顯示這個id的div

<template>
    <div>
    <hello></hello>
    <div>{{this.$route.params.id}}</div>
    </div>
</template>

在根元件的跳轉路由裡天上值

<router-link  to="/hellohello/123">HelloHello</router-link>

最後顯示的結果

6、查詢引數，相當於http://www.baidu.com?id=1234 這種，定義使用query: { userId: 123 } 新增引數

在根元件的跳轉路由裡宣告查詢引數

<router-link :to="{path: '/hellohello',query:{id :'1234'}}" >HelloHello</router-link>

使用：this.$route.query.引數名 來獲取引數。在HelloHello.vue裡新增顯示這個id的div

<template>
    <div>
    <hello></hello>
    <div>{{this.$route.query.id}}</div>
    </div>
</template>

結果

7、巢狀路由：巢狀路由就是在一個被路由過來的頁面下可以繼續使用路由，巢狀也就是路由中的路由的意思。即子元件裡面也可以使用<router-view>顯示其他元件。

先給路由新增巢狀路由，記得引進用子元件

  {
      path: '/hellohello',
      name: 'HelloHello',
      component: HelloHello,
      children: [
        {
          path: '1234',
          component: a1234
        },
        {
          path: '12345',
          component: a12345
        }]
    }

在子元件裡宣告需要巢狀的路由資訊

<template>
    <div>
    <hello></hello>
      <router-link to="/hellohello/1234">子路由1234</router-link>
      <router-link  to="/hellohello/12345">子路由12345</router-link>
      <router-view></router-view>
    </div>
</template>

上面聲明瞭兩個子路由指定了兩個元件，那麼這兩個元件也定義新建一下，在componts下

<template>
<div>
  <div class='hello'>子路由1234</div>
</div>
</template>

<script>
export default {
  name: '1234',
  data () {
  }
}

<template>
<div>
  <div class='hello'>子路由12345</div>
</div>
</template>

<script>
export default {
  name: '12345',
  data () {
  }
}

這樣就完成了，執行一下

8、程式設計時導航路由：即通過編寫程式碼來實現路由的跳轉。this.$router.push('path')；會把當前的元件替換掉。

在hellohello.vue新增一個button按鈕，用於觸發點選事件，繫結方法用於動態變更路由

<template>
    <div>
    <hello></hello>
     <button @click="trun">點選</button>
     <router-view></router-view>
    </div>
</template>

<script>
import Hello from '@/components/Hello'
export default {
  name: 'HelloHello',
  components: {
    Hello
  },
  methods: {
    trun () {
       this.$router.push('12345') // 根據路由的path來跳轉
      // this.$router.push({name: '12345'}) // 根據路由的name來跳轉
      // this.$router.push({ name: '12345', params: { id: '123' }})
      // 上一行是根據路由的name來跳轉，帶路徑引數,要求path帶路徑引數[如果提供了 path，params 會被忽略]
      //this.$router.push({path: '/12345', query: {id: 123}}) // 帶查詢引數
    }
  }
}
</script>

再給元件12345定義一個路由

 {
      path: '/12345',
      name: '12345',
      component: a12345
    }

儲存，執行