在 vue 中使用 vue-router

 　　1、安裝匯入並註冊路由模組：

• 執行 npm i vue-router -S 安裝路由模組

• 在 index.js 中匯入並註冊路由模組

// 匯入路由模組
import VueRouter from 'vue-router'
// 註冊路由模組
Vue.use(VueRouter)

　　2、在vue檔案建立路由連結：

<!-- router-link 就是 第一步，建立 路由的 hash 連結的 -->
<!-- to 屬性，表示 點選此連結，要跳轉到哪個 hash 地址， 注意：to 屬性中，大家不需要以 # 開頭 
 
-->
<router-link to="/home">首頁</router-link>
<router-link to="/movie">電影</router-link>
<router-link to="/about">關於</router-link>

　　3、建立並在 src/index.js 中匯入路由相關的元件

import Home from './components/Home.vue'
import Movie from './components/Movie.vue'
import About from './components/About.vue'

　　4、建立路由規則

// 建立路由規則（對應關係）
const router = new VueRouter({ // 配置物件中，要提供 hash 地址 到 元件之間的 對應關係
  routes: [ // 這個 routes 就是 路由 規則 的陣列，裡面要放很多的對應關係
    // { path: 'hash地址', component: 配置物件 }
    { path: '/home', component: Home },
    { path: '/movie', component: Movie },
    { path: '/about', component: About }
  ]
})

 
// 建立的 router 物件，千萬要記得，掛載到 vm 例項上
const vm = new Vue({
  el: '#app',
  render: c => c(App),
  router // 把 建立的路由物件，一定要掛載到 VM 例項上，否則路由不會生效
})

　　5、在頁面上放路由容器

<!-- 這是路由的容器，將來，通過路由規則，匹配到的元件，都會被展示到這個 容器中 -->
<router-view></router-view>

路由規則的匹配過程

1. 使用者點選 頁面的 路由連結router-link，點選的一瞬間，就會修改 瀏覽器 位址列 中的 Hash 地址；

2. 當 hash 地址被修改以後，會立即被 vue-router 監聽到，然後進行 路由規則的 匹配；最終，找到 要顯示的元件；

3. 當 路由規則匹配成功以後，就找到了 要顯示的 元件，然後 把 這個元件，替換到 頁面 指定的 路由容器router-view 中

設定路由高亮的兩種方式和重定向

1. 通過路由預設提供的router-link-active, 為這個類新增自己的高亮樣式即可；

2. 通過路由建構函式，在傳遞路由配置物件的時候，提供 linkActiveClass 屬性，來覆蓋預設的高亮類樣式；

　　在index.js中，與routes平級：

// 3. 建立路由物件   前端路由： hash 值 到 元件的對應關係； 一個 hash 對應一個要展示的元件
const router = new VueRouter({
  // routes 是 路由規則陣列，其中的每個物件，都是一條路由規則：
  // 路由規則的基本組成部分：  { path: 'hash值', component: 要展示的元件 }
  routes: [
    // 通過 redirect 屬性，可以實現前端路由的重定向；
    { path: '/', redirect: '/home' },
    { path: '/home', component: Home },
    { path: '/movie', component: Movie },
    { path: '/about', component: About }
  ],
  linkActiveClass: 'my-active' // 被啟用的路由的類名， 預設類名為 router-link-active
})

案例實現

src/index.js

import Vue from 'vue'

// 1. 匯入路由包，並得到 路由的建構函式
import VueRouter from 'vue-router'
// 2. 把 路由 安裝到 Vue 上
Vue.use(VueRouter)

// 匯入需要使用路由切換的元件
import Home from './Home.vue'
import Movie from './Movie.vue'
import About from './About.vue'

// 3. 建立路由物件   前端路由： hash 值 到 元件的對應關係； 一個 hash 對應一個要展示的元件
const router = new VueRouter({
  // routes 是 路由規則陣列，其中的每個物件，都是一條路由規則：
  // 路由規則的基本組成部分：  { path: 'hash值', component: 要展示的元件 }
  routes: [
    // 通過 redirect 屬性，可以實現前端路由的重定向；
    { path: '/', redirect: '/home' },
    { path: '/home', component: Home },
    { path: '/movie', component: Movie },
    { path: '/about', component: About }
  ],
  linkActiveClass: 'my-active' // 被啟用的路由的類名， 預設類名為 router-link-active
})

// 匯入根元件
import app from './app.vue'
const vm = new Vue({
  el: '#app',
  render: c => c(app),
  router // 4. 把路由物件，掛載到VM上
})

app.vue

<template>
  <div>
    <h1>App根元件</h1>

    <!-- 記住：router-link 標籤，將來會被 預設 渲染為 a 連結 -->
    <!-- to 屬性，表示 點選這個連結，要跳轉到哪個 hash 值 -->
    <router-link to="/home">首頁</router-link>
    <router-link to="/movie">電影</router-link>
    <router-link to="/about">關於</router-link>

    <!-- 這是一個佔位符，將來，通過路由規則，匹配到的元件，會被替換到 router-view 所在的位置 -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {}
</script>

<style lang="less" scoped>
.router-link-active {
  color: red;
}

.my-active {
  color: red;
  font-weight: bold;
}
</style>