Vue.js實(shí)訓(xùn)【基礎(chǔ)理論(5天)+項(xiàng)目實(shí)戰(zhàn)(5天)】博客匯總表【詳細(xì)筆記】?

目? ?錄

1、單頁(yè)面應(yīng)用

1.1、多頁(yè)面應(yīng)用

1.2、單頁(yè)面應(yīng)用

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、組件分類(lèi)

3、如何使用vue-router

4、404配置

5、激活class

6、動(dòng)態(tài)路由

6.1、動(dòng)態(tài)路由實(shí)現(xiàn)

7、編程式導(dǎo)航

8、路由嵌套

8.1、“路由嵌套”定義

8.2、“路由嵌套”實(shí)現(xiàn)

9、路由元信息

10、導(dǎo)航攔截

---

【AM：1~3】======【PM：4~10】?

1、單頁(yè)面應(yīng)用

1.1、多頁(yè)面應(yīng)用

一個(gè)網(wǎng)址對(duì)應(yīng)一個(gè)頁(yè)面資源。

• 跳轉(zhuǎn)一個(gè)頁(yè)面需要重新加載整個(gè)頁(yè)面的資源，頁(yè)面跳轉(zhuǎn)會(huì)刷新！

• seo優(yōu)化好。

1.2、單頁(yè)面應(yīng)用

整個(gè)網(wǎng)站只有一個(gè)頁(yè)面，網(wǎng)站內(nèi)部通過(guò)相關(guān)手段展示不同的內(nèi)容。

• 頁(yè)面的跳轉(zhuǎn)是使用js 實(shí)現(xiàn)-->判斷路徑的變化，去展示不同的組件內(nèi)容。 頁(yè)面自始至終都不會(huì)刷新！

• 維護(hù)容易； 復(fù)用性強(qiáng)；組件緩存； 體驗(yàn)感好；快發(fā)速度快；

• 缺點(diǎn)：首屏加載慢，不利于seo優(yōu)化！

1.3、vue-router

如何管理這些 路徑跳轉(zhuǎn)和組件頁(yè)面之間的關(guān)系呢？ /index 怎么就知道 是首頁(yè)組件？ 怎么就展示首頁(yè)組件呢？所以Vue生態(tài)圈里面 有一個(gè)官方的管理 路徑跳轉(zhuǎn)和組件頁(yè)面之間關(guān)系的 插件， 叫做vue-router。?

2、安裝vue-router

2.1、Install vue-router

vue init weppack 項(xiàng)目名 初始化項(xiàng)目的時(shí)候 選擇安裝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' // 導(dǎo)入 同級(jí)目錄下面的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' // 導(dǎo)入Vue import Router from 'vue-router' // 導(dǎo)入Vue-Routerimport HelloWorld from '@/components/HelloWorld' // 導(dǎo)入components下面的HelloWrold組件// @ 表示 src目錄 // Vue安裝Vue-Router插件！ Vue.use(Router)// export default 對(duì)象 暴露某個(gè)對(duì)象出去！ export default new Router({routes: [ // 路由映射關(guān)系數(shù)組！ 路由映射： 什么地址展示什么組件！{path: '/', component: HelloWorld}] })

2.2.3、App.vue

<template><div id="app"><!-- router-view是視口組件！ 表示路由對(duì)應(yīng)的地址的組件 展示輸出的地方！ --><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、組件分類(lèi)

?組件分為兩種：

• 一種是路由的頁(yè)面組件（如：首頁(yè)、分類(lèi)、列表頁(yè)） 通常放在pages目錄下。

• 一種是零件組件（如：輪播組件、tab切換組件、頭部組件、底部組件） 通常放在components目錄下。

3、如何使用vue-router

第1步： 安裝vue-router【? Install vue-router? (Y/n) ? // 選擇輸入y】

第2步： 在src目錄下面創(chuàng)建pages目錄，在里面書(shū)寫(xiě)好需要使用到的組件，如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 如果當(dāng)前頁(yè)面的地址和a的地址相同，該a標(biāo)簽就有該class值routes: [ {path: '/', // 表示訪問(wèn)的地址component: Index // 該地址展示的組件！},{path:"/menu", component: Menu },{ path: "/car",component: Car},] })

第4步： 刪除App.vue 里面的那個(gè)router-view 上面的img標(biāo)簽。

第5步： 地址欄輸入 /就可以展示Index組件， 輸入/menu 就可以展示Menu組件。

第6步： 如果想實(shí)現(xiàn)a鏈接點(diǎn)擊跳轉(zhuǎn)，在任意一個(gè)頁(yè)面組件里面使用。

<router-link to="path地址">文字</router-link> // 編譯成a標(biāo)簽，點(diǎn)擊就可以進(jìn)入對(duì)應(yīng)的地址

4、404配置

默認(rèn)情況下如果打開(kāi)一個(gè)不存在的路由地址，頁(yè)面的router-view不會(huì)顯示任何內(nèi)容。

實(shí)際開(kāi)發(fā)的時(shí)候，往往會(huì)配置404頁(yè)面。

routes: [...,{path: "*",component: "404的頁(yè)面組件"} ]

注意：404的映射配置往往放在最下面！

5、激活class

如果當(dāng)前的路由地址和我們的a標(biāo)簽的href地址相同，我們應(yīng)該將a標(biāo)簽激活。

export default new Router({linkExactActiveClass:"class值", // 激活的class 如果當(dāng)前頁(yè)面的地址和a的地址相同，該a標(biāo)簽就會(huì)有這個(gè)class值routes: [] })

6、動(dòng)態(tài)路由

• 新聞列表=(傳遞新聞的id)=>新聞詳情

• 商品的分類(lèi)=(傳遞分類(lèi)的id)=>商品的列表=(商品的id)=>商品詳情

• 多級(jí)關(guān)系頁(yè)面之間需要傳遞數(shù)據(jù)。

6.1、動(dòng)態(tài)路由實(shí)現(xiàn)

// 路由配置 routes:[...{path: "/地址/:變量",component: "組件A"}... ] // 上一級(jí)頁(yè)面 <router-link to="/地址/數(shù)據(jù)1">去組件A </router-link> <router-link to="/地址/數(shù)據(jù)2">去組件A </router-link>

?$：加符號(hào)，區(qū)分不同的變量。解決“命名沖突”問(wèn)題。

// 組件A 里如何獲取傳遞進(jìn)入的數(shù)據(jù)呢？this.$route.params.變量 // 可以獲取到數(shù)據(jù)1，數(shù)據(jù)2// this.$route 表示當(dāng)前的路由地址信息

7、編程式導(dǎo)航

• 就是使用JS控制 路由的跳轉(zhuǎn)。

  • this.$router.back() 返回上一頁(yè)

  • this.$router.push("path地址")

• this.$router表示當(dāng)前項(xiàng)目的路由對(duì)象！

8、路由嵌套

8.1、“路由嵌套”定義

什么是嵌套路由。網(wǎng)站開(kāi)發(fā)的時(shí)候，很多模塊屬于某個(gè)模塊子模塊，且展示的內(nèi)容應(yīng)該在某個(gè)模塊底下去展示。

如上圖中，“研究生教育、本科生教育、國(guó)際教育、繼續(xù)教育”這些都是人才培養(yǎng)模塊下面的信息，他們的內(nèi)容，應(yīng)該展示在人才培養(yǎng)頁(yè)面的 里面的右側(cè)灰色額部分，而不是頂級(jí)路由的展示區(qū)域。

8.2、“路由嵌套”實(shí)現(xiàn)

... 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 如果當(dāng)前頁(yè)面的地址和a的地址相同，該a標(biāo)簽就會(huì)有這個(gè)class值routes: [ ...{path: "/rcpy",component: Rcpy,children:[ // children 表示當(dāng)前路由的子路由！{ 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}, // 同上]},...] })

二級(jí)路由需要配置在一級(jí)路由的children選項(xiàng)里面， 且二級(jí)路由的頁(yè)面組件不會(huì)展示在App.vue里面的router-view標(biāo)簽處， 而是展示在對(duì)應(yīng)一級(jí)路由頁(yè)面組件里面的router-view中。 如上例子中的Bks、Yjs等，這些組件是展示在 Rcpy組件里面的router-view中。

注意點(diǎn)： 子路由的path地址前面不能加/

9、路由元信息

給每個(gè)路由頁(yè)面都傳遞一些數(shù)據(jù)，如網(wǎng)頁(yè)標(biāo)題！【是否有權(quán)限！】

routes: [{path: "地址",meta: { 自定義數(shù)據(jù) }component: "組件"} ]

獲取 this.$route.meta.數(shù)據(jù)

10、導(dǎo)航攔截

單頁(yè)面應(yīng)用無(wú)法設(shè)計(jì)標(biāo)題！ 進(jìn)入頁(yè)面之前判斷一下是否有權(quán)限！

... var router = new Router({ ... }) // 導(dǎo)航前置守衛(wèi)！ 所有的路由進(jìn)入之前都會(huì)執(zhí)行這個(gè)函數(shù)！ router.beforeEach(function(to,from,next){// to 表示要去的路由信息// from 表示來(lái)的路由信息// next 中間函數(shù)， 只有調(diào)用了next函數(shù)，路由真的進(jìn)入下一個(gè)頁(yè)面document.title = to.meta.title // 設(shè)置標(biāo)題！next(); }) 多謝觀看~

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。