目 錄
2.2.2、router/index.js（路由的配置文件）
【AM：1~3】======【PM：4~10】
1、單頁面應用
1.1、多頁面應用
一個網址對應一個頁面資源。
跳轉一個頁面需要重新加載整個頁面的資源，頁面跳轉會刷新！
seo優化好。
1.2、單頁面應用
整個網站只有一個頁面，網站內部通過相關手段展示不同的內容。
頁面的跳轉是使用js 實現-->判斷路徑的變化，去展示不同的組件內容。 頁面自始至終都不會刷新！
維護容易； 複用性強；組件緩存； 體驗感好；快發速度快；
缺點：首屏加載慢，不利於seo優化！
1.3、vue-router
如何管理這些 路徑跳轉和組件頁面之間的關係呢？ /index 怎麼就知道 是首頁組件？ 怎麼就展示首頁組件呢？所以Vue生態圈裏面 有一個官方的管理 路徑跳轉和組件頁面之間關係的 插件， 叫做vue-router。
2、安裝vue-router
2.1、Install vue-router
vue init weppack 項目名 初始化項目的時候 選擇安裝vue-router即可。
? Install vue-router? (Y/n) // 選擇輸入y
2.2、生成目錄介紹
2.2.1、main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router' // 導入 同級目錄下面的router文件加下面的index.js文件模塊
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router, // 這裏將路由模塊掛載到Vue上面去！
components: { App },
template: '<App/>'
})
2.2.2、router/index.js（路由的配置文件）
import Vue from 'vue' // 導入Vue
import Router from 'vue-router' // 導入Vue-Router
import HelloWorld from '@/components/HelloWorld' // 導入components下面的HelloWrold組件
// @ 表示 src目錄
// Vue安裝Vue-Router插件！
Vue.use(Router)
// export default 對象 暴露某個對象出去！
export default new Router({
routes: [ // 路由映射關係數組！ 路由映射： 什麼地址展示什麼組件！
{
path: '/',
component: HelloWorld
}
]
})
2.2.3、App.vue
<template>
<div id="app">
<!-- router-view是視口組件！ 表示路由對應的地址的組件 展示輸出的地方！ -->
<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>
2.3、路由示意圖
2.4、組件分類
組件分爲兩種：
一種是路由的頁面組件（如：首頁、分類、列表頁） 通常放在pages目錄下。
一種是零件組件（如：輪播組件、tab切換組件、頭部組件、底部組件） 通常放在components目錄下。
3、如何使用vue-router
第1步： 安裝vue-router【? Install vue-router? (Y/n) // 選擇輸入y】
第2步： 在src目錄下面創建pages目錄，在裏面書寫好需要使用到的組件，如index.vue、menu.vue、car.vue 等。
第3步： 修改 router/index.js 文件。
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
import Index from "../pages/Index.vue"
import Menu from "../pages/Menu.vue"
import Car from "../pages/Car.vue"
export default new Router({
linkExactActiveClass:"on", // 激活的class 如果當前頁面的地址和a的地址相同，該a標籤就有該class值
routes: [
{
path: '/', // 表示訪問的地址
component: Index // 該地址展示的組件！
},
{path:"/menu", component: Menu },
{ path: "/car",component: Car},
]
})
第4步： 刪除App.vue 裏面的那個router-view 上面的img標籤。
第5步： 地址欄輸入 /就可以展示Index組件， 輸入/menu 就可以展示Menu組件。
第6步： 如果想實現a鏈接點擊跳轉，在任意一個頁面組件裏面使用。
<router-link to="path地址">文字</router-link> // 編譯成a標籤，點擊就可以進入對應的地址
4、404配置
默認情況下如果打開一個不存在的路由地址，頁面的router-view不會顯示任何內容。
實際開發的時候，往往會配置404頁面。
routes: [
...,
{
path: "*",
component: "404的頁面組件"
}
]
注意：404的映射配置往往放在最下面！
5、激活class
如果當前的路由地址和我們的a標籤的href地址相同，我們應該將a標籤激活。
export default new Router({
linkExactActiveClass:"class值", // 激活的class 如果當前頁面的地址和a的地址相同，該a標籤就會有這個class值
routes: []
})
6、動態路由
新聞列表=(傳遞新聞的id)=>新聞詳情
商品的分類=(傳遞分類的id)=>商品的列表=(商品的id)=>商品詳情
多級關係頁面之間需要傳遞數據。
6.1、動態路由實現
// 路由配置
routes:[
...
{
path: "/地址/:變量",
component: "組件A"
}
...
]
// 上一級頁面
<router-link to="/地址/數據1">去組件A </router-link>
<router-link to="/地址/數據2">去組件A </router-link>
$：加符號，區分不同的變量。解決“命名衝突”問題。
// 組件A 裏如何獲取傳遞進入的數據呢？
this.$route.params.變量 // 可以獲取到數據1，數據2
// this.$route 表示當前的路由地址信息
7、編程式導航
就是使用JS控制 路由的跳轉。
this.$router.back() 返回上一頁
this.$router.push("path地址")
this.$router表示當前項目的路由對象！
8、路由嵌套
8.1、“路由嵌套”定義
什麼是嵌套路由。網站開發的時候，很多模塊屬於某個模塊子模塊，且展示的內容應該在某個模塊底下去展示。
如上圖中，“研究生教育、本科生教育、國際教育、繼續教育”這些都是人才培養模塊下面的信息，他們的內容，應該展示在人才培養頁面的 裏面的右側灰色額部分，而不是頂級路由的展示區域。
8.2、“路由嵌套”實現
...
import Rcpy from "../pages/Rcpy.vue"
import Bks from "../pages/jiaoyu/Bks.vue"
import Yjs from "../pages/jiaoyu/Yjs.vue"
import Jxjy from "../pages/jiaoyu/Jxjy.vue"
import Gjs from "../pages/jiaoyu/Gjs.vue"
...
export default new Router({
linkExactActiveClass:"on", // 激活的class 如果當前頁面的地址和a的地址相同，該a標籤就會有這個class值
routes: [
...
{
path: "/rcpy",
component: Rcpy,
children:[ // children 表示當前路由的子路由！
{ path: "bks", component: Bks }, // /rcpy/bks 渲染 Bks 到 Rcpy 組件裏面的router-view
{ path: "yjs", component: Yjs }, // /rcpy/yjs 渲染 Yjs 到 Rcpy 組件裏面的router-view
{path: "jxjy",component: Jxjy}, // 同上
{path: "gjs", component: Gjs}, // 同上
]
},
...
]
})
二級路由需要配置在一級路由的children選項裏面， 且二級路由的頁面組件不會展示在App.vue裏面的router-view標籤處， 而是展示在對應一級路由頁面組件裏面的router-view中。 如上例子中的Bks、Yjs等，這些組件是展示在 Rcpy組件裏面的router-view中。
注意點： 子路由的path地址前面不能加/
9、路由元信息
給每個路由頁面都傳遞一些數據，如網頁標題！【是否有權限！】
routes: [
{
path: "地址",
meta: { 自定義數據 }
component: "組件"
}
]
獲取 this.$route.meta.數據
10、導航攔截
單頁面應用無法設計標題！ 進入頁面之前判斷一下是否有權限！
...
var router = new Router({ ... })
// 導航前置守衛！ 所有的路由進入之前都會執行這個函數！
router.beforeEach(function(to,from,next){
// to 表示要去的路由信息
// from 表示來的路由信息
// next 中間函數， 只有調用了next函數，路由真的進入下一個頁面
document.title = to.meta.title // 設置標題！
next();
})
多謝觀看~