立志存高遠，篤行踐初心
三更燈火五更雞，正是男兒讀書時， 黑發不知勤學早，白首方悔讀書遲，
立志，標定人生方向；奮斗，創造人生價值，二者相輔相成，互相促進，
大部分程式員的「 目標 」都是成為一名優秀的工程師，一名可以統覽全域的「 架構師 」，
千里之行始于足下
對于大部分普通人而言，成為一名優秀的架構師還是有一定難度的，「 千里之行始于足下，一步一個腳印，慢慢來 」，
🍅 粉絲專屬福利：包郵送書3本，如下書單四選一，
🍅 獲取方式：
1、參與文末投票，點贊，收藏即有機會獲得精美圖書一本；
1、評論區評論：獲取點贊最多者，獲取一本；
2、評論區評論：通過random函式，隨機抽取兩名；
【注意】想加入微信群聊，可以掃描主頁左側二維碼、私信與我、加本人微信guo_rui_
1、《億級流量Java高并發與網路編程實戰》
2、《分布式一致性演算法開發實戰 媒體宣傳文案》
3、《Java多執行緒與大資料處理實戰》
4、《深入淺出TCPIP和VPN》
Vue思維導圖
目錄
?一、前端路由vue-router
1、維基百科
2、路由的機制
3、后端渲染
4、后端路由階段
?5、前后端分離
6、單頁面富應用階段
7、SPA頁面
8、前端路由
二、改變URL，但是頁面不進行整體的重繪
?1、URL的hash
2、HTML5的history
三、安裝和使用vue-router
1、安裝vue-router
2、在模塊化工程中使用它（因為它是一個插件，所以可以通過Vue.use()來安裝路由功能）
3、使用vue-router的步驟
4、router-link與router-view
5、vue-router代碼實體
四、router-link的其它屬性補充
五、vue-router動態路由的使用
六、vue-router打包檔案的決議
七、路由懶加載
1、什么是懶加載
2、懶加載的方式
3、代碼實體
八、路由嵌套
1、嵌套路由是一個很常見的功能
2、實作嵌套路由的兩個步驟
3、嵌套路由代碼實體
九、vue-router引數傳遞
1、傳遞引數主要有兩種型別: params和query
2、代碼實體
十、vue-router全域導航守衛
1、生命周期函式
2、前置守衛
十一、keep-alive與vue-router
?一、前端路由vue-router
1、維基百科
路由就是通過互聯的網路把資訊從源地址傳輸到目的地址的活動，
2、路由的機制
路由包括路由和轉發，
路由器 -> 公網IP -> 映射表 -> 內網IP
映射表：[內網ip1:電腦標識1，內網ip2:電腦標識2]
3、后端渲染
JSP：java server page
后端渲染 == html + css + java
java代碼的作用是從資料庫中讀取資料，然后將他們動態的放在頁面中，
后端渲染的意思就是，前端請求后端，頁面的資料在后端已經渲染好了，然后再回傳前端，內容包括HTML+css，當然是包含資料的HTML，
后端路由：后端處理URL和頁面之間的映射關系，
4、后端路由階段
早期的網站開發整個HTML頁面是由服務器來渲染的，
服務器直接生產渲染好對應的HTML頁面, 回傳給客戶端進行展示，
但是, 一個網站, 這么多頁面服務器如何處理呢?
- 一個頁面有自己對應的網址, 也就是URL，
- URL會發送到服務器, 服務器會通過正則對該URL進行匹配, 并且最后交給一個Controller進行處理，
- Controller進行各種處理, 最終生成HTML或者資料, 回傳給前端，
- 這就完成了一個IO操作，
上面的這種操作, 就是后端路由：
- 當我們頁面中需要請求不同的路徑內容時, 交給服務器來進行處理, 服務器渲染好整個頁面, 并且將頁面回傳給客戶頓，
- 這種情況下渲染好的頁面, 不需要單獨加載任何的js和css, 可以直接交給瀏覽器展示, 這樣也有利于SEO的優化，
后端路由的缺點：
- 一種情況是整個頁面的模塊由后端人員來撰寫和維護的，
- 另一種情況是前端開發人員如果要開發頁面, 需要通過PHP和Java等語言來撰寫頁面代碼，
- 而且通常情況下HTML代碼和資料以及對應的邏輯會混在一起, 撰寫和維護都是非常糟糕的事情，
?5、前后端分離
后端只負責提供資料，不負責其它任何階段，
瀏覽器中顯示的網頁中的大部分內容，都是由前端寫的JS代碼在瀏覽器中執行，最終渲染出來的網頁，
隨著Ajax的出現, 有了前后端分離的開發模式，
后端只提供API來回傳資料, 前端通過Ajax獲取資料, 并且可以通過JavaScript將資料渲染到頁面中，
這樣做最大的優點就是前后端責任的清晰, 后端專注于資料上, 前端專注于互動和可視化上，
并且當移動端(iOS/Android)出現后, 后端不需要進行任何處理, 依然使用之前的一套API即可，
目前很多的網站依然采用這種模式開發，
6、單頁面富應用階段
其實SPA最主要的特點就是前后端分離的基礎上加上了一層前端路由；
也就是前端來維護一套路由規則
7、SPA頁面
SPA：單頁富應用
整個網頁只有一個HTML網頁，
8、前端路由
URL和前端頁面的映射關系，
-----> vue router
前端路由的核心是什么呢？
改變URL，但是頁面不進行整體的重繪，
二、改變URL，但是頁面不進行整體的重繪
?1、URL的hash
URL的hash也就是錨點，本質上是改變window.location的href屬性，
我們可以通過直接賦值location.hash來改變href，但是頁面不發生重繪，
2、HTML5的history
history.pushState({},'','home')history.pushState相當于堆疊的操作，先進后出，彈堆疊和入堆疊的操作，
history.pushState入堆疊；
history.back()出堆疊；
history.go(-1) 相當于 history.back()；
history.forward 相當于history.go(1)；
history.replaceState()：不能回傳；
三、安裝和使用vue-router
1、安裝vue-router
npm install vue-router --save
2、在模塊化工程中使用它（因為它是一個插件，所以可以通過Vue.use()來安裝路由功能）
- 匯入路由物件，并且呼叫Vue.use(VueRouter)
- 創建路由實體，并傳入路由映射配置
- 在Vue實體中掛載創建的路由實體
3、使用vue-router的步驟
- 創建路由組件
- 配置路由映射，組件和路徑映射關系
- 使用路由：通過<router-link>和<router-view>
4、router-link與router-view
<router-link>：該標簽是一個vue-router中已經內置的組件，它會被渲染成一個<a>標簽，
<router-view>：該標簽會根據當前的路徑，動態渲染出不同的組件，
網頁的其他內容，比如頂部的標題/導航，或者底部的一些著作權資訊等會和<router-view>處于同一個等級，
在路由切換時，切換的是<router-view>掛載的組件，其他內容不會發生改變，
5、vue-router代碼實體
（1）App.vue
<template>
<div id="app">
<router-link to="/home" >首頁</router-link>
<router-link to="/about">關于</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
（2）Home.vue
<template>
<div>
<h2>我是首頁</h2>
<p>我是首頁內容, 哈哈哈</p>
</div>
</template>
<script>
export default {
name: "Home"
}
</script>
<style scoped>
</style>
（3）About.vue
<template>
<div>
<h2>我是關于</h2>
<p>我是關于內容, 呵呵呵</p>
</div>
</template>
<script>
export default {
name: "About"
}
</script>
<style scoped>
</style>
（4）main.js
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
render: h => h(App)
})
（5）index.js
// 配置路由相關的資訊
import VueRouter from 'vue-router'
import Vue from 'vue'
import Home from '../components/Home'
import About from '../components/About'
// 1.通過Vue.use(插件), 安裝插件
Vue.use(VueRouter)
// 2.創建VueRouter物件
const routes = [
{
path: '',
// redirect重定向
redirect: '/home'
},
{
path: '/home',
component: Home
},
{
path: '/about',
component: About
}
]
const router = new VueRouter({
// 配置路由和組件之間的應用關系
routes,
mode: 'history',
linkActiveClass: 'active'
})
// 3.將router物件傳入到Vue實體
export default router
（6）瀏覽器展示
四、router-link的其它屬性補充
- tag：tag可以指定router-link之后渲染成什么組件，比如<router-link tag='button'></router-link>，此時就是一個button了；
- replace：增加replace屬性，就相當于replaceState；
- class：可以為標簽增加樣式，比如選中的會自動賦值router-link-active；
- active-class=“active”：選中的；也可以在router組件中配置linkActiveClass: 'active'；
通過代碼跳轉路由：
<script>
export default {
name: 'App',
methods: {
homeClick() {
// 通過代碼的方式修改路由 vue-router
// push => pushState
this.$router.push('/home')
//this.$router.replace('/home')
console.log('homeClick');
},
aboutClick() {
this.$router.push('/about')
//this.$router.replace('/about')
console.log('aboutClick');
}
}
}
</script>五、vue-router動態路由的使用
在某些情況下，一個頁面的path路徑可能是不確定的，比如我們進入用戶界面時，希望路徑中存在用戶id，這種path和Component相互匹配的關系，我們稱之為動態路由，也是路由傳遞資料的一種方式，
this.$route表示正在活躍的路由，
獲取路徑中的姓名：
...
<router-link :to="'/user/'+userId">用戶</router-link>
...<template>
<div>
<h2>我是用戶界面</h2>
<p>我是用戶的相關資訊, 嘿嘿嘿</p>
<h2>{{userId}}</h2>
<h2>{{$route.params.id}}</h2>
<button @click="btnClick">按鈕</button>
</div>
</template>
<script>
export default {
name: "User",
computed: {
userId() {
return this.$route.params.id
}
}
</script>六、vue-router打包檔案的決議
七、路由懶加載
1、什么是懶加載
當打包構建應用時，JavaScript包會變得非常大，影響頁面加載，
如果我們能吧不同路由對應的組件分割成不同的代碼塊，然后當路由被訪問的時候才加載對應組件，這樣就更加高效了，
2、懶加載的方式
（1）結合Vue的異步組件和Webpack的代碼分析
const Home = resolve => { require.ensure(['../components/Home.vue'],
() => { resolve(require('../components/Home.vue')) })};
（2）amd寫法
const About = resolve => require(['../components/About.vue'], resolve);
（3）在ES6中，我們可以有更加簡單的寫法來組織Vue異步組件和Webpack的代碼分割
const Home = () => import('../components/Home.vue')
3、代碼實體
index.js
// import Home from '../components/Home'
// import About from '../components/About'
// import User from '../components/User'
// 懶加載方式
const Home = () => import('../components/Home')
const About = () => import('../components/About')
const User = () => import('../components/User')八、路由嵌套
1、嵌套路由是一個很常見的功能
比如在home頁面中，我們希望通過/home/news和/home/message訪問一些內容；
一個路徑映射一個組件，訪問這兩個路徑也分別渲染這兩個組件；
2、實作嵌套路由的兩個步驟
- 創建對應的子組件，并且在路由映射中配置對應的子路由；
- 在組件內部使用<router-view>標簽；
3、嵌套路由代碼實體
（1）index.js
// 配置路由相關的資訊
import VueRouter from 'vue-router'
import Vue from 'vue'
const Home = () => import('../components/Home')
const HomeNews = () => import('../components/HomeNews')
const HomeMessage = () => import('../components/HomeMessage')
const About = () => import('../components/About')
const User = () => import('../components/User')
const Profile = () => import('../components/Profile')
// 1.通過Vue.use(插件), 安裝插件
Vue.use(VueRouter)
// 2.創建VueRouter物件
const routes = [
{
path: '',
// redirect重定向
redirect: '/home'
},
{
path: '/home',
component: Home,
meta: {
title: '首頁'
},
children: [
{
path: 'news',
component: HomeNews
},
{
path: 'message',
component: HomeMessage
}
]
}
]
const router = new VueRouter({
// 配置路由和組件之間的應用關系
routes,
mode: 'history',
linkActiveClass: 'active'
})
// 3.將router物件傳入到Vue實體
export default router
（2）Home.vue
<template>
<div>
<h2>我是首頁</h2>
<p>我是首頁內容, 哈哈哈</p>
<router-link to="/home/news">新聞</router-link>
<router-link to="/home/message">訊息</router-link>
<router-view></router-view>
<h2>{{message}}</h2>
</div>
</template>
<script>
export default {
name: "Home",
data() {
return {
message: '你好啊',
path: '/home/news'
}
}
}
</script>
<style scoped>
</style>
（3）HomeNews.vue
<template>
<div>
<ul>
<li>美女1</li>
<li>美女2</li>
<li>美女3</li>
<li>美女4</li>
</ul>
</div>
</template>
<script>
export default {
name: "HomeNews"
}
</script>
<style scoped>
</style>
九、vue-router引數傳遞
1、傳遞引數主要有兩種型別: params和query
params的型別:
- 配置路由格式: /router/:id
- 傳遞的方式: 在path后面跟上對應的值
- 傳遞后形成的路徑: /router/123, /router/abc
query的型別:
- 配置路由格式: /router, 也就是普通配置
- 傳遞的方式: 物件中使用query的key作為傳遞方式
- 傳遞后形成的路徑: /router?id=123, /router?id=abc
2、代碼實體
（1）傳值
<script>
...
export default {
...
methods: {
userClick() {
this.$router.push('/user/' + this.userId)
},
profileClick() {
this.$router.push({
path: '/profile',
query: {
name: 'kobe',
age: 19,
height: 1.87
}
})
}
}
}
</script>（2）取值
<template>
<div>
<h2>{{$route.query.name}}</h2>
<h2>{{$route.query.age}}</h2>
<h2>{{$route.query.height}}</h2>
</div>
</template>
十、vue-router全域導航守衛
1、生命周期函式
<script>
export default {
name: "Home",
data() {
return {
message: '你好啊',
path: '/home/news'
}
},
created() {
console.log('home created');
},
destroyed() {
console.log('home destroyed');
},
// 這兩個函式, 只有該組件被保持了狀態使用了keep-alive時, 才是有效的
activated() {
this.$router.push(this.path);
console.log('activated');
},
deactivated() {
console.log('deactivated');
},
beforeRouteLeave (to, from, next) {
console.log(this.$route.path);
this.path = this.$route.path;
next()
}
}
</script>2、前置守衛
（1）動態修改標題
跳轉前回呼
// 前置守衛(guard)
router.beforeEach((to, from, next) => {
// 從from跳轉到to
document.title = to.matched[0].meta.title
// 必須呼叫next()，表示執行下一步的意思
next()
})
（2）beforeEach原始碼分析：
（3）跳轉后回呼
// 后置鉤子(hook)
router.afterEach((to, from) => {
// console.log('--我是CSDN哪吒--');
})十一、keep-alive與vue-router
keep-alive是vue內置的一個組件，可以使被包含的組件保留狀態，或避免重新渲染，
router-view也是一個組件，如果直接被包在keep-alive里面，所有路徑匹配到的試圖組件都會被快取，
🍅 Java學習路線：搬磚工逆襲Java架構師
🍅 Java經典面試題大全：10萬字208道Java經典面試題總結(附答案)
🍅 簡介：Java領域優質創作者🏆、CSDN哪吒公眾號作者? 、Java架構師奮斗者💪
🍅 掃描主頁左側二維碼，加入群聊，一起學習、一起進步
🍅 歡迎點贊 👍 收藏 ?留言 📝
往期精彩回顧
【Vue基礎知識總結 1】Vue入門
【Vue知識體系總結 2】Vue動態系結v-bind
【Vue知識體系總結 3】Vue常用標簽
【Vue知識體系總結 4】Vue組件化開發
【Vue基礎知識總結 5】Vue實作樹形結構
【Vue基礎知識總結 6】Spring Boot + Vue 全堆疊開發，都需要哪些前端知識？
【Vue基礎知識總結 7】結合雙向系結理解父子組件
【Vue基礎知識總結 8】插槽slot與vue匯入匯出
【Vue基礎知識總結 9】vue webpack打包原理
【Vue基礎知識總結 10】Vue腳手架
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/312120.html
標籤：java