一、前端路由
前端路由的核心是改變url 但是頁面不進(jìn)行整體的刷新
如何實(shí)現(xiàn)改變url 但是不刷新整個(gè)頁面
方法一：通過改變hash 值
方法二:通過H5 的history模式
history接口是HTML5新增的, 它有五種模式改變URL而不刷新頁面.
1.history.pushState()
因?yàn)閜ushState()相當(dāng)于入棧模式 有返回
2.
history.replaceState()相當(dāng)于替代教馆，無返回
3.
history.go()相當(dāng)于返回
返回上一頁history.go(-1)
返回下一頁history.go()
二、創(chuàng)建前端路由
步驟一: 安裝vue-router
npm install vue-router --save
步驟二: 在模塊化工程中使用它(因?yàn)槭且粋€(gè)插件, 所以可以通過Vue.use()來安裝路由功能)
第一步：導(dǎo)入路由對(duì)象享怀，并且調(diào)用
Vue.use(VueRouter)
第二步：創(chuàng)建路由實(shí)例豆同，并且傳入路由映射配置
第三步：在Vue實(shí)例中掛載創(chuàng)建的路由實(shí)例
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
導(dǎo)入路由對(duì)象，并且調(diào)用
在Vue實(shí)例中掛載創(chuàng)建的路由實(shí)例
使用前端路由
1.創(chuàng)建路由組件
2.配置路由和組件的映射關(guān)系
3.使用路由：通過<router-link>和<router-view>
創(chuàng)建組件
配置組件和路由的映射關(guān)系
使用路由
<router-link>: 該標(biāo)簽是一個(gè)vue-router中已經(jīng)內(nèi)置的組件, 它會(huì)被渲染成一個(gè)<a>標(biāo)簽.
<router-view>: 該標(biāo)簽會(huì)根據(jù)當(dāng)前的路徑, 動(dòng)態(tài)渲染出不同的組件.
網(wǎng)頁的其他內(nèi)容, 比如頂部的標(biāo)題/導(dǎo)航, 或者底部的一些版權(quán)信息等會(huì)和<router-view>處于同一個(gè)等級(jí).
在路由切換時(shí), 切換的是<router-view>掛載的組件, 其他內(nèi)容不會(huì)發(fā)生改變.
路由的默認(rèn)路徑 redirect
如何可以讓路徑默認(rèn)跳到到首頁, 并且<router-view>渲染首頁組件呢?
非常簡(jiǎn)單, 我們只需要配置多配置一個(gè)映射就可以了.
const routes = [
{
path: '/',
redirect:'/home'
}
]
我們?cè)趓outes中又配置了一個(gè)映射.
path配置的是根路徑: /
redirect是重定向, 也就是我們將根路徑重定向到/home的路徑下, 這樣就可以得到我們想要的結(jié)果了.
HTML5的History模式
我們前面說過改變路由額方式有兩種
URL的hash和HTML5的history
默認(rèn)情況下子房，路徑的改變使用的hash
如果希望使用HTML5的history模式舱殿，非常簡(jiǎn)單奥裸，進(jìn)行如下配置即可
const router =new VueRouter({
routes,
mode:'history'
})
路由跳轉(zhuǎn)
router-link跳轉(zhuǎn)
在前面的<router-link>中, 我們只是使用了一個(gè)屬性: to, 用于指定跳轉(zhuǎn)的路徑.
<router-link>還有一些其他屬性:
tag: tag可以指定<router-link>之后渲染成什么組件, 比如上面的代碼會(huì)被渲染成一個(gè)<li>元素, 而不是<a>
replace: replace不會(huì)留下history記錄, 所以指定replace的情況下, 后退鍵返回不能返回到上一個(gè)頁面中
active-class: 當(dāng)<router-link>對(duì)應(yīng)的路由匹配成功時(shí), 會(huì)自動(dòng)給當(dāng)前元素設(shè)置一個(gè)router-link-active的class, 設(shè)置active-class可以修改默認(rèn)的名稱.
在進(jìn)行高亮顯示的導(dǎo)航菜單或者底部tabbar時(shí), 會(huì)使用到該類.
但是通常不會(huì)修改類的屬性, 會(huì)直接使用默認(rèn)的router-link-active即可.
代碼跳轉(zhuǎn)
在VueRouter里面所有的組件都有一個(gè)$router 屬性
this.$router.push('/home')
push==pushState
this.$router.relplace('/home')
raplace==repalceState
動(dòng)態(tài)路由跳轉(zhuǎn)
在某些情況下，一個(gè)頁面的pathl路徑可能是不確定的沪袭，比如我們進(jìn)入用戶界面時(shí)湾宙，希望如下的路徑
/user/aaaa或/user/bbbb
除了有前面的/user之外，后面還跟上了用戶的ID
這種path和Component的匹配關(guān)系冈绊，我們稱之為動(dòng)態(tài)路由(也是路由傳遞數(shù)據(jù)的一種方式)侠鳄。
const routes = [
{
path:'/user/:id', //動(dòng)態(tài)路由
component:User
}
]
//獲取id
<div>
<h2>{{$router.params.id}}</h2>
</div>
認(rèn)識(shí)路由的懶加載
當(dāng)打包構(gòu)建應(yīng)用的時(shí)候。javascript包會(huì)變得非常大死宣，頁面這么多放在一個(gè)js文件中, 必然會(huì)影響頁面的加載伟恶。如果我們一次性從服務(wù)器請(qǐng)求下來這個(gè)頁面, 可能需要花費(fèi)一定的時(shí)間, 甚至用戶的電腦上還出現(xiàn)了短暫空白的情況.
路由懶加載可以解決以上問題
路由懶加載的主要作用就是將路由對(duì)應(yīng)的組件打包成一個(gè)個(gè)的js代碼塊.
只有在這個(gè)路由被訪問到的時(shí)候, 才加載對(duì)應(yīng)的組件
方式一: 結(jié)合Vue的異步組件和Webpack的代碼分析.
const Home = resolve => { require.ensure(['../components/Home.vue'], () => { resolve(require('../components/Home.vue')) })};
方式二: AMD寫法
const About = resolve => require(['../components/About.vue'], resolve);
方式三: 在ES6中, 我們可以有更加簡(jiǎn)單的寫法來組織Vue異步組件和Webpack的代碼分割.
const Home = () => import('../components/Home.vue')
嵌套路由
嵌套路由是一個(gè)很常見的功能
比如在home頁面中, 我們希望通過/home/news和/home/message訪問一些內(nèi)容.
一個(gè)路徑映射一個(gè)組件, 訪問這兩個(gè)路徑也會(huì)分別渲染兩個(gè)組件.
路由跳轉(zhuǎn)傳遞參數(shù)
傳遞參數(shù)主要有兩種類型: params和query
params的類型:
配置路由格式: /router/:id
傳遞的方式: 在path后面跟上對(duì)應(yīng)的值
傳遞后形成的路徑: /router/123, /router/abc
query的類型:
配置路由格式: /router, 也就是普通配置
傳遞的方式: 對(duì)象中使用query的key作為傳遞方式
傳遞后形成的路徑: /router?id=123, /router?id=abc
傳遞方式一
傳遞方式二
獲取參數(shù)
獲取參數(shù)通過route 博秫，并且當(dāng)路由切換時(shí)，路由對(duì)象會(huì)被更新鹃骂。
通過$route獲取傳遞的信息如下:
router是有區(qū)別的
router.push方法
$route為當(dāng)前router跳轉(zhuǎn)對(duì)象里面可以獲取name畏线、path、query良价、params等
導(dǎo)航守衛(wèi)
什么是導(dǎo)航守衛(wèi)?
vue-router提供的導(dǎo)航守衛(wèi)主要用來監(jiān)聽監(jiān)聽路由的進(jìn)入和離開的.
vue-router提供了beforeEach和afterEach的鉤子函數(shù), 它們會(huì)在路由即將改變前和改變后觸發(fā).
們來考慮一個(gè)需求: 在一個(gè)SPA應(yīng)用中, 如何改變網(wǎng)頁的標(biāo)題呢?
網(wǎng)頁標(biāo)題是通過<title>來顯示的, 但是SPA只有一個(gè)固定的HTML, 切換不同的頁面時(shí), 標(biāo)題并不會(huì)改變.
但是我們可以通過JavaScript來修改<title>的內(nèi)容.window.document.title = '新的標(biāo)題'.
那么在Vue項(xiàng)目中, 在哪里修改? 什么時(shí)候修改比較合適呢?
我們可以利用beforeEach來完成標(biāo)題的修改.
首先, 我們可以在鉤子當(dāng)中定義一些標(biāo)題, 可以利用meta來定義
其次, 利用導(dǎo)航守衛(wèi),修改我們的標(biāo)題.
導(dǎo)航鉤子的三個(gè)參數(shù)解析:
to: 即將要進(jìn)入的目標(biāo)的路由對(duì)象.
from: 當(dāng)前導(dǎo)航即將要離開的路由對(duì)象.
next: 調(diào)用該方法后, 才能進(jìn)入下一個(gè)鉤子.
keep-alive遇見vue-router
keep-alive 是 Vue 內(nèi)置的一個(gè)組件寝殴，可以使被包含的組件保留狀態(tài)，或避免重新渲染明垢。
它們有兩個(gè)非常重要的屬性:
include - 字符串或正則表達(dá)蚣常，只有匹配的組件會(huì)被緩存
exclude - 字符串或正則表達(dá)式，任何匹配的組件都不會(huì)被緩存
router-view 也是一個(gè)組件痊银，如果直接被包在 keep-alive 里面抵蚊，所有路徑匹配到的視圖組件都會(huì)被緩存：
通過create聲明周期函數(shù)來驗(yàn)證
