六、Vue-Router：基礎路由處理、路由提取成單獨文件、路由嵌套、路由傳參數、路由高亮、html5的history使用

一、vue-router的安裝

官網文檔

【官網】：https://cn.vuejs.org/v2/guide/routing.html
【router文檔】：https://router.vuejs.org/zh/

導入文件時找到根目錄寫法：[@目錄]

import router from '@/src/components/index.vue'

1.1直接下載 / CDN

https://unpkg.com/vue-router/dist/vue-router.js

Unpkg.com 提供了基於 NPM 的 CDN 鏈接。上面的鏈接會一直指向在 NPM 發布的最新版本。你也可以像 https://unpkg.com/vue-router@2.0.0/dist/vue-router.js 這樣指定 版本號 或者 Tag。

在 Vue 后面加載 vue-router，它會自動安裝的：

<script src="/path/to/vue.js"></script>
<script src="/path/to/vue-router.js"></script>

1.2NPM安裝（重點）

npm / cnpm install vue-router

如果在一個模塊化工程中使用它，必須要通過 Vue.use() 明確地安裝路由功能：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

如果使用全局的 script 標簽，則無須如此 (手動安裝)。

1.3構建開發版

如果你想使用最新的開發版，就得從 GitHub 上直接 clone，然后自己 build 一個 vue-router。

git clone https://github.com/vuejs/vue-router.git node_modules/vue-router
cd node_modules/vue-router
npm install
npm run build

二、路由代碼實例（重點）

2.1簡單實例

src/main.js（重點1）

[1]引入路由
[2]引入組件
[3]使用路由
[4]創建一個路由實例
[5]默認路徑
[6]待控制的組件
[7]把路由投到vue實例

import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router' //[1]引入路由
import Parent from './components/parent.vue' //[2]引入組件

Vue.config.productionTip = false

Vue.use(VueRouter)//[3]使用路由

var router = new VueRouter({//[4]創建一個路由實例
  routes: [{
    path: "/",//[5]默認路徑
    component:Parent //[6]待控制的組件
  }]
})

new Vue({
  el: '#app',
  template: '<App/>',
  router,//[7]把路由投到vue實例
  components: {
    App
  }
})

App.vue(重點2)

[1]路由顯示位置

<template>
  <div id="app">
     <img src="./assets/logo.png" width="80px">
    <router-view></router-view><!-- [1]路由顯示位置 -->
  </div>
</template>

<script>
export default {
  name: 'App',
  components: {},
  data () {
    return {}
  },
}
</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>

parent.vue

一個簡單的組件即可

<template>
  <div class="parent">
    <h1>路由實例</h1>
  </div>
</template>

<script>
 export default{
    name:'parent',
    components:{},
    data(){
      return{}
    }
    
 }
</script>

<style scoped>
</style>

效果：注意地址欄多了個#號，即路由成功

地址欄改成：http://localhost:8080/#/app ，即訪問app.vue

2.2路由控制2個及多個組件

src/main.js（主要）

[2.2]引入組件2
[2.5]非默認路徑
[2.6]待控制的組件

import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router' //[1]引入路由
import Parent from './components/parent.vue'//[2]引入組件
import Hello from './components/hello.vue'//【2.2】引入組件2

Vue.config.productionTip = false

Vue.use(VueRouter)//[3]使用路由

var router = new VueRouter({//[4]創建一個路由實例
  routes: [{
    path: "/",//[5]默認路徑組件 / 后不要加parent即可
    component:Parent ,//[6]待控制的組件
  },{
    path: "/hello",//【2.5】非默認路徑
    component:Hello ,//【2.6】待控制的組件
  }]
})

new Vue({
  el: '#app',
  template: '<App/>',
  router,//[7]把路由投到vue實例
  components: {
    App
  }
})

src/app.vue

只寫重點：其它略過

 <router-view></router-view><!-- [1]路由顯示位置 -->

src/components/parent.vue

簡單組件，略過

src/components/hello.vue

簡單組件，略過

效果：mian.js【5-6】步誰是 /默認就顯示誰
http://localhost:8080/#/
路由實例parent

http://localhost:8080/#/hello
路由實例hello

2.3把路由單獨提取出來成一個獨立文件

src/router.js【主要】

【重點】此處必須用export default 導出其它地方才能使用

import Vue from 'vue' //[0]引入vue
import VueRouter from 'vue-router' //[1]引入路由
import Parent from './components/parent.vue'//[2]引入組件
import Hello from './components/hello.vue'//[2.2]引入組件2

Vue.use(VueRouter)//[3]使用路由

//【重點】此處必須導出其它地方才能使用
export default new VueRouter({//[4]創建一個路由實例
  routes: [{
    path: "/",//[5]默認路徑組件 / 后不要加parent即可
    component:Parent ,//[6]待控制的組件
  },{
    path: "/hello",//[2.5]非默認路徑
    component:Hello ,//[2.6]待控制的組件
  }]
})

src/main.js（次要）

[7]先引入上面寫好的router.js
[8]把路由投到vue實例

import Vue from 'vue'
import App from './App'
import router from './router.js'//[7]先引入

Vue.config.productionTip = false

new Vue({
  el: '#app',
  template: '<App/>',
  router,//[8]把路由投到vue實例
  components: {
    App
  }
})

src/app.vue

只寫重點：其它略過

 <router-view></router-view><!-- [1]路由顯示位置 -->

src/components/parent.vue

簡單組件，略過

src/components/hello.vue

簡單組件，略過
效果同上例。

2.4 導航（跳轉）路由各組件

navList.vue(主要)

【重點】路由鏈接

<template>
  <div>
  <!-- 【重點】路由鏈接 -->
    <router-link to='/'>parent頁</router-link> 
    <router-link to="/hello">hello頁</router-link>
  </div>
</template>

<script>
  export default{
    name:'navList',
    data(){
      return{
        msg:'導航組件'
      }
    }
  }
</script>

<style>
</style>

在app.vue引入導航組件

<template>
  <div id="app">
     <img src="./assets/logo.png" width="80px">
     <navList/>
    <router-view></router-view><!-- [1]路由顯示位置 -->
  </div>
</template>

<script>
  import navList from './components/navList'

export default {
  name: 'App',
  components: {
    navList,
  },
  data () {
    return {}
  },
}
</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>

src/components/parent.vue

簡單組件，略過

src/components/hello.vue

簡單組件，略過
效果：點哪個導航，切換到哪個上

2.5路由嵌套

第1步，在如下目錄創建三個hello.vue的子組件

/src/components/heChild/
hello1.vue、hello2.vue、hello3.vue

內容為簡單組件即可例如：

<template>
  <div>
    hello1子組件
  </div>
</template>

<script>
  export default{
    name:'hello1',
    data(){
      return{}
    }
  }
</script>

<style></style>

第2步，對src/componets/hello.vue頁面布局：

布局要求：有一個左欄，內放子導航

<template>
  <div>
    <div id='left'>
      <h1>hello子組件</h1>
      <!-- 【1】以下是路由鏈接 注意路徑to要加上子組件的文件夾-->
      <router-link to="/heChild/hello1">hellow1</router-link><br/>
      <router-link to="/heChild/hello2">hellow2</router-link><br/>
      <router-link to="/heChild/hello3">hellow3</router-link><br/>
    </div>

    <div id='right'>
      <!-- 【2】點路由后，其視頻插入的位置 -->
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
  export default{
    name:'hello',
    data(){
      return{}
    }
  }
</script>

<style scoped>
  /* 【3】對頁面進行布局 */
  #left {
    float:left;
    width:280px;
    min-height: 700px;
    background: lightskyblue;
  }
  #left a{
   color:black;
  }
  #right {
    width:100%;
    min-height:700px;
  }
</style>

第3步，配置路由src/router.js【重點】

【3.0】以下3個為引入第1步創建的子組件
【3.1】重定向，用於顯示默認子組件
【3.2】 嵌套路由重點：在hello內部加一個children數組,在內部加上路由配置

import Vue from 'vue'
import VueRouter from 'vue-router' //[1]引入路由
import Parent from './components/parent.vue'//[2]引入組件
import Hello from './components/hello.vue'//[2.2]引入組件2

import Hello1 from './components/heChild/hello1.vue'//【3.0】以下3個為引入對應的子組件
import Hello2 from './components/heChild/hello2.vue'
import Hello3 from './components/heChild/hello3.vue'

Vue.use(VueRouter)//[3]使用路由

export default new VueRouter({//[4]創建一個路由實例
  routes: [{
    path: "/",//[5]默認路徑組件 / 后不要加parent即可
    component:Parent ,//[6]待控制的組件
  },
  {
    path: "/hello",//[2.5]非默認路徑
    component:Hello ,//[2.6]待控制的組件
    redirect:'/heChild/hello1',//【3.1】重定向，用於顯示默認子組件
    //【3.2】 嵌套路由重點：在hello內部加一個children數組,在內部加上路由配置
    children:[
      {
        path:'/heChild/hello1',
        component:Hello1,
      },
      {
        path:'/heChild/hello2',
        component:Hello2,
      },
      {
        path:'/heChild/hello3',
        component:Hello3,
      },
    ]

  }]
})

第4步，main.js引入3的路由文件

不重要，所有代碼同上例

import Vue from 'vue'
import App from './App'
import router from '@/router.js'//[7]先引入

Vue.config.productionTip = false

new Vue({
  el: '#app',
  template: '<App/>',
  router,//[8]把路由投到vue實例
  components: {
    App
  }
})

第5步，頭部導航組件，src/navList.vue

不重要，除加了樣式外，大代碼同上例

<template>
  <div id="nav">
    <!-- 【重點】路由鏈接 -->
    <router-link to='/'>parent頁</router-link>
    <router-link to="/hello">hello頁</router-link>
  </div>
</template>

<script>
  export default{
    name:'navList',
    data(){
      return{
        msg:'導航組件'
      }
    }
  }
</script>

<style scoped>
#nav {
  background-color: lightskyblue;
  width: 100%;
  height: 30px;
  line-height: 30px;
}
#nav a{
  color: #000000;
  text-decoration:none;
}
</style>

第6步，src/App.vue

不重要，所有代碼同上例

<template>
  <div id="app">
     <img src="./assets/logo.png" width="80px">
     <navList/>
    <router-view></router-view><!-- [1]路由顯示位置 -->
  </div>
</template>

<script>
  import navList from './components/navList'

export default {
  name: 'App',
  components: {
    navList,
  },
  data () {
    return {}
  },
}
</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>

第7步，parent.vue同上例

不重要

<template>
  <div class="parent">
    <h1>路由實例parent</h1>
  </div>
</template>

<script>

  export default{
    name:'parent',
    components:{},
    data(){
      return{
        list:[] //定義一個空數組用於存放接收到的數據
      }
    },
    filters:{},
    directives:{},
  }
</script>

<style scoped>
</style>

效果：

2.6用路由router-link傳遞參數

官方文檔：

https://router.vuejs.org/zh/guide/essentials/passing-props.html

第1步，先建立一個src/wa.vue組件，常規組件

代碼略過..

第2步，配置src/router.js

【4.0】引入第3個組件wa.vue
【4.1】路由傳遞參數 (/組件名/:參數名) 下一步到navList.vue里
【4.2】路由的 里傳參數要用到

import Vue from 'vue'
import VueRouter from 'vue-router' //[1]引入路由
import Parent from './components/parent.vue'//[2]引入組件
import Hello from './components/hello.vue'//[2.2]引入組件2

import Hello1 from './components/heChild/hello1.vue'//[3.0]以下3個為引入對應的子組件
import Hello2 from './components/heChild/hello2.vue'
import Hello3 from './components/heChild/hello3.vue'

import Wa from './components/wa.vue' //【4.0】引入第3個組件

Vue.use(VueRouter)//[3]使用路由

export default new VueRouter({//[4]創建一個路由實例
  routes: [
    {
    path: "/",//[5]默認路徑組件 / 后不要加parent即可
    name:'parent',
    component:Parent ,//[6]待控制的組件
    },
    {
    path: "/hello",//[2.5]非默認路徑
    name:'hello',
    component:Hello ,//[2.6]待控制的組件
    redirect:'/heChild/hello1',//[3.1]顯示默認子組件
    //[3.2 嵌套路由重點]在hello內部加一個children數組,在內部加上路由配置
      children:[{
          path:'/heChild/hello1',
          name:'hello1',
          component:Hello1,
        },
        {
          path:'/heChild/hello2',
          name:'hello2',
          component:Hello2,
        },
        {
          path:'/heChild/hello3',
          name:'hello3',
          component:Hello3,
        }]
    },
    {
      path: "/wa/:count",//【4.1】路由傳遞參數 (/組件名/:參數名) 下一步到navList.vue里
      name:'wa',//【4.2】路由的<router-link :to="{name:'wa',params:{count:18888}}">里傳參數要用到
      component:Wa,//[6]待控制的組件
    },

]
})

第3步，navLink.vue里配置router-link鏈接的to（重點1）

【1】待傳遞的參數寫法：
<router-link :to="{name:'wa',params:{count:18888}}">Wa頁</router-link>

<template>
  <div id="nav">
    <!-- 路由鏈接 -->
    <router-link to='/'>parent頁</router-link>
    <router-link to="/hello">hello頁</router-link>
    <router-link :to="{name:'wa',params:{count:18888}}">Wa頁</router-link> <!-- 【1】待傳遞的參數 -->
  </div>
</template>

<script>
  export default{
    name:'navList',
    data(){
      return{
        msg:'導航組件'
      }
    }
  }
</script>

<style scoped>
#nav {
  background-color: lightskyblue;
  width: 100%;
  height: 30px;
  line-height: 30px;
}
#nav a{
  color: #000000;
  text-decoration:none;
}
</style>

第4步，wa.vue接收參數寫法（重點2）

【1】接收參數寫法（注意route不是router）： {{$route.params.count}}

<template>
  <div>
    {{$route.params.count}}<!-- 【1】獲取參數 -->
  </div>
</template>

<script>
  export default{
    name:'wa',
    data(){
      return{}
    }
  }
</script>

<style>
</style>

第5步，其它部分代碼

main.js
App.js
同上例略過

效果：

點到wa頁，將顯示從第3步傳過來的參數18888

2.6.2 獲取多個路由router-link傳的參數

1.路由配置src/router.js

其它總分略過只寫重點
path: "/wa/:count/:name"

{
      path: "/wa/:count/:name",//【重點】路由傳遞參數 (/組件名/:參數名) 下一步到navList.vue里
      name:'wa',//路由的<router-link :to="{name:'wa',params:{count:18888}}">里傳參數要用到
      component:Wa,//待控制的組件
    },

2.傳遞配置src/navList.vue

【1】待傳遞的參數，傳遞多個參數

<template>
  <div id="nav">
    <!-- 路由鏈接 -->
    <router-link to='/'>parent頁</router-link>
    <router-link to="/hello">hello頁</router-link>
    <router-link :to="{name:'wa',params:{count:18888,name:'小明'}}">Wa頁</router-link> <!-- 【1】待傳遞的參數，傳遞多個參數 -->
  </div>
</template>

3.接收配置src/components/wa.vue

<template>
  <div>
    {{$route.params.count}}----{{$route.params.name}}<!-- 【1】獲取參數，獲取多個參數 -->
  </div>
</template>

效果

注意地址欄參數寫法

2.7 傳遞參數地址欄是：？參數1=1

詳見官方文檔：
https://router.vuejs.org/zh/guide/essentials/passing-props.html#函數模式
https://router.vuejs.org/zh/api/#router-link

2.8簡單路由高亮效果

只要在navList.vue里加個樣式即可：
也可以全局設置在：App.vue里設置

<style>
.router-link-active {
  color:red;
}
</style>

效果：

2.9 高級設置路由高亮效果

1. hello.vue

【1】以下是路由鏈接 注意路徑to要加上主組件，這樣點到子路由里，主路由設置顏色才不會消失

<template>
  <div>
    <div id='left'>
      <h1>hello子組件</h1>
      <!-- 【1】以下是路由鏈接 注意路徑to要加上主組件，這樣點到子路由里，主路由設置顏色才不會消失-->
      <router-link to="/hello/heChild/hello1">hellow1</router-link><br/>
      <router-link to="/hello/heChild/hello2">hellow2</router-link><br/>
      <router-link to="/hello/heChild/hello3">hellow3</router-link><br/>
    </div>

    <div id='right'>
      <!-- 點路由后，其視頻插入的位置 -->
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
  export default{
    name:'hello',
    data(){
      return{}
    }
  }
</script>

<style scoped>
  /* 對頁面進行布局 */
  #left {
    float:left;
    width:280px;
    min-height: 700px;
    background: lightskyblue;
  }

  #right {
    width:100%;
    min-height:700px;
  }
</style>

2. router.js

重點：【1】-【3】

import Vue from 'vue'
import VueRouter from 'vue-router' //引入路由
import Parent from './components/parent.vue'//引入組件
import Hello from './components/hello.vue'//引入組件2

import Hello1 from './components/heChild/hello1.vue'//以下3個為引入對應的子組件
import Hello2 from './components/heChild/hello2.vue'
import Hello3 from './components/heChild/hello3.vue'

import Wa from './components/wa.vue' //引入第3個組件

Vue.use(VueRouter)//使用路由

export default new VueRouter({
linkActiveClass:'active',//【0】設置路由鏈接處理激活狀態的style樣式class名(默認值: "router-link-active"

)
  routes: [
    {
    path: "/",
    name:'parent',
    component:Parent ,
    },
    //【1】帶子路由的hello組件配置開始
    {
    path: "/hello",
    name:'hello',
    component:Hello ,
    redirect:'/hello/heChild/hello1',//【2】路徑要寫完整前面帶上主路由 /hello/子路由路徑/子路由
    //【3】子路由配置開始
      children:[{
          path:'/hello/heChild/hello1',//【4】子路由，注意路徑
          name:'hello1',
          component:Hello1,
        },
        {
          path:'/hello/heChild/hello2',//【5】子路由，注意路徑
          name:'hello2',
          component:Hello2,
        },
        {
          path:'/hello/heChild/hello3',// 【6】子路由，注意路徑
          name:'hello3',
          component:Hello3,
        }]
    },
    {
      path: "/wa/:count/:name",
      name:'wa',
      component:Wa,
    },

]
})

3. App.vue里設置全局路由處於active狀態的樣式

<style>
.active {
  color:red;
}
</style>

效果：

2.10 HTML5的history控制路由后退步數

官網：
https://router.vuejs.org/zh/guide/essentials/history-mode.html#后端配置例子