路由相關(guān)知識
a用戶發(fā)送一條信息，經(jīng)過路由灭衷，路由會根據(jù)映射表次慢，通過電腦的Mac地址找到對應(yīng)的ip，然后將信息轉(zhuǎn)發(fā)出去
什么是前端渲染翔曲，迫像，，什么是后端渲染瞳遍，闻妓，，掠械，什么是前后端分離
- 后端渲染由缆，傳統(tǒng)的ASP、JSP猾蒂、Java渲染機制
- 前端渲染 均唉，使用JS來渲染也免得大部分內(nèi)容，代表的是當(dāng)前流行的SPA單頁面富應(yīng)用,優(yōu)點是：局部刷新肚菠、懶加載舔箭、富交互、節(jié)約服務(wù)器成本蚊逢、分離設(shè)計
-
同構(gòu)渲染指前后端共用JS层扶，首次渲染使用node.js來直出HTML
04-前端路由中url和組件的關(guān)系.jpg
01-后端路由階段.png
02-前端后端分離階段.png
03-SPA頁面頁面的階段.png
在不刷新頁面的條件下，改變URL的兩種方法
image.png
HTML5的History六中改變URL而不刷新頁面
- replaceState:替換原來的路徑(替換路徑时捌，不能返回)
- pushState：使用新路徑
- popState:路徑的回退
- go:向前或向后改變路徑
- forward：向前改變路徑（go（1））
- back：向后改變路徑（go（-1））
路由工作的大致過程
image.png
在模塊化工程中使用它(因為是一個插件, 所以可以通過Vue.use()來安裝路由功能)
第一步：導(dǎo)入路由對象怒医，并且調(diào)用 Vue.use(VueRouter)
第二步：創(chuàng)建路由實例炉抒，并且傳入路由映射配置
第三步：在Vue實例中掛載創(chuàng)建的路由實例
在子組件中獲取到路由配置信息地址的內(nèi)容
$route.params.指的是正處在活躍狀態(tài)的路徑信息
<b>{{$route.params.userId}}</b>
vue-router使用步驟
- 先下載對應(yīng)的腳手架（記得要下載vue-router）
- 在components文件夾創(chuàng)建組件文件（.vue文件）
- 配置路由映射：組件路徑之間的關(guān)系（router/index.html）
- 使用路由: 通過<router-link>（自動渲染成a標(biāo)簽）和<router-view>(App.vue模板)
- 在main.js里面進行使用,注意一定要導(dǎo)出的名字是
router
import router from './router/router.js'
new Vue({
router,
render: (h) => h(App),
}).$mount('#app')
瀏覽器url得知路徑模式 ----哈希模式轉(zhuǎn)化為history模式
image.png
router-link補充
image.png
- 點擊按鈕的時候奢讨。會為該DOM元素增加一個類
router-link-active
可以將該類名修改
// 將路由導(dǎo)入到vue實例當(dāng)中
export default new Router({
//配置組件和路由之間的關(guān)系
routes: routers,
mode: 'history',
//修改點擊之后增加的類名
linkActiveClass: 'active'
})
懶加載
- 由于打包構(gòu)建應(yīng)用的時候，打包之后js文件會變得很大，如果一次性從服務(wù)器上面請求這些數(shù)據(jù)的話拿诸，會有點慢扒袖，甚至電腦上面還出現(xiàn)短暫的空白，所以我們要用到懶加載
- 懶加載的作用：將路由對應(yīng)的組件打包成一個個對應(yīng)的模塊亩码，當(dāng)路由訪問到其中的組建的時候季率，才回去加載對應(yīng)的模塊
- 懶加載操作
- ES6方法
const Home = () => import('../components/Home.vue') - AMD寫法：
const About = resolve => require(['../components/About.vue'], resolve); - 結(jié)合Vue的異步組件和Webpack的代碼分析：
const Home = resolve => { require.ensure(['../components/Home.vue'], () => { resolve(require('../components/Home.vue')) })};
打包之后是：image.png
打包之后的文件命名問題
const routes = [{ path: "/", redirect: "/home" },
{
path: "/home",
component: () =>
import ( /*webpackChunkName:"home-chunk"*/ "../package/Home.vue")
},
{
path: "/about",
component: () =>
import ( /*webpackChunkName:"about-chunk"*/ "../package/About.vue")
}
];
image.png
- 錯誤頁面
設(shè)置，最后有*號表示會把路徑按照‘/'劃分成數(shù)組
{
path: "/:pathMatch(.*)*",
component: () =>
import ( /*webpackChunkName:"about-chunk"*/ "../package/NotFound.vue")
}
使用
<p>{{$route.params.pathMatch}}</p>
路由嵌套
image.png
- 實現(xiàn)方法
- 先寫出兩個組件文件
- 將其導(dǎo)入到路由配置文件當(dāng)中進行配置
{
//父組件
path: '/home',
component: Home,
//定義子路由
children: [{
//默認(rèn)進入的路徑
path: '',
redirect: 'message'
}, {
path: 'message',
component: Message
}, {
path: 'news',
component: News
}]
}
- 在父組件當(dāng)中展示
<template>
<div>
<p>我是首頁組件</p>
<router-link to="/home/news">新聞</router-link>
<router-link to="/home/message">消息</router-link>
<router-view></router-view>
</div>
</template>
傳遞參數(shù)
- 先生成一個組件
- 在路由配置文件中進行配置
- 將其展示出來描沟，并配置路徑
飒泻？query(通過&進行拼接)
<router-link :to="{path:'/info',query:{name:'guo',age:18,hight:188}}" tag="button">關(guān)于</router-link>
$route和$router的區(qū)別
- $route,在子組件中使用，獲取到的是正處于活躍狀態(tài)的vue組件的路由配置信息
<p>{{$route.query}}</p>
-
router方法：
可以傳入一個對象
image.png
image.png
- $router為VueRouter實例吏廉，可以要導(dǎo)航到不同URL
homeClick(){
this.$router.push('/home')
console.log('homeclick');
}
image.png
在setup（）獲取route和router的方法
image.png
變量是自定義的
router-link的v-slot
image.png
router-view的slot
動態(tài)添加路由
image.png
刪除路由
image.png
導(dǎo)航守衛(wèi)
vue-router提供了beforeEach和afterEach的鉤子函數(shù), 它們會在路由即將改變前和改變后觸發(fā)
- 類似的鉤子函數(shù)還有create（）泞遗，當(dāng)初始化一個vue實例的時候，自動調(diào)用該函數(shù)
- 參數(shù)解析導(dǎo)航鉤子的三個參數(shù)解析:
to: 即將要進入的目標(biāo)的路由對象.
from: 當(dāng)前導(dǎo)航即將要離開的路由對象.
next: 調(diào)用該方法后, 才能進入下一個鉤子. -
路由對象
image.png - to：即將進入的路由Route對象席覆；
- from：即將離開的路由Route對象史辙；
- next不常用
//router是vue的實例
router.beforeEach((to, from, next) => {
console.log(to);
//matched[0]表示路由嵌套的父路由
console.log(to.matched[0].meta.title);
document.title = to.matched[0].meta.title
//表示繼續(xù)執(zhí)行下一步
next()
})
返回值
keep-alive 是 Vue 內(nèi)置的一個組件，可以使被包含的組件保留狀態(tài)佩伤，或避免重新渲染
<keep-alive exclude="message,User">
<!-- exclude屬性里面包含的是組建的name屬性聊倔，且之間不能有空格，表示的是生巡，只要里面包含的組件都不會背緩存 -->
<router-view></router-view>
</keep-alive>
