Vue.js實訓【基礎理論(5天)+項目實戰(5天)】博客匯總表【詳細筆記】?

目? ?錄

1、單頁面應用

1.1、多頁面應用

1.2、單頁面應用

1.3、vue-router

2、安裝vue-router

2.1、Install vue-router

2.2、生成目錄介紹

2.2.1、main.js

2.2.2、router/index.js（路由的配置文件）?

2.2.3、App.vue

2.3、路由示意圖

2.4、組件分類

3、如何使用vue-router

4、404配置

5、激活class

6、動態路由

6.1、動態路由實現

7、編程式導航

8、路由嵌套

8.1、“路由嵌套”定義

8.2、“路由嵌套”實現

9、路由元信息

10、導航攔截

---

【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-Routerimport 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(); }) 多謝觀看~

總結

以上是生活随笔為你收集整理的Vue.js-Day05【安装路由（vue-router）、如何使用vue-router、404配置、激活class、动态路由、编程式导航、路由嵌套、路由元信息、导航拦截】的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。