vue-router使用心得
一 抒情偏：
? ? ? 首先請(qǐng)先讓抒個(gè)情屏镊，畢竟我也是個(gè)騷年，自從敲上代碼后每天都是枕戈待旦痰腮，砥礪前行而芥，如履薄冰，希望不負(fù)汗水膀值，不負(fù)哪些被敲壞的鍵盤(pán)棍丐，摔壞的鼠標(biāo)，夜涼如水沧踏，而此時(shí)此刻我還在奮筆疾書(shū)歌逢。
二：簡(jiǎn)單介紹
router是干什么的？
通過(guò)router來(lái)實(shí)現(xiàn)各個(gè)各個(gè)組件之間的組合翘狱，來(lái)實(shí)現(xiàn)sap頁(yè)面應(yīng)用秘案。
使用步驟：
1，在vue JS模塊中引入：
import Vue from 'vue';
import VueRouter from 'vue-router';
2，注冊(cè)路由插件
Vue.use(VueRouter);
配置路由：
new VueRouter({ 先寫(xiě)個(gè)路由器
routes:[
{
path:"/路徑"
component: about 組件
{
? ? ? ? path: '/',
? ? ? ? redirect: '/about' // 默認(rèn)路由
? ? ? }}]
配置嵌套路由? children
? ? path: '/home',
? ? component: home,
? ? children: [
? ? ? {
? ? ? ? path: 'news',
? ? ? ? component: news
? ? ? },
? ? ? {
? ? ? ? path: 'message',
? ? ? ? component: message
? ? ? }
? ? ]
配置router鏈接
router--link：用來(lái)生成路由鏈接
router- vive? : 用來(lái)顯示當(dāng)前路由組件界面
三：編程式導(dǎo)航
想要得到導(dǎo)航不同的url 阱高，就要使用router.push方法师骗。這個(gè)方法會(huì)向history棧添加一個(gè)新的記錄，當(dāng)用戶(hù)點(diǎn)擊瀏覽器? 后退按鈕時(shí) 會(huì)退到url讨惩。
四：導(dǎo)航的護(hù)衛(wèi)
如果想要實(shí)現(xiàn)每個(gè)路由進(jìn)入前進(jìn)行判斷辟癌，滿(mǎn)足條件才進(jìn)行跳轉(zhuǎn)，否則跳轉(zhuǎn)到特定的頁(yè)面荐捻，這個(gè)時(shí)候我們就要用到vue-router? beforeEach這個(gè)方法來(lái)實(shí)現(xiàn)而他與三個(gè)參數(shù)：
to：router進(jìn)入的目標(biāo)對(duì)象
from：router導(dǎo)航要離開(kāi)的路由
next:function 一定要調(diào)用改方法來(lái)resolve這個(gè)鉤子執(zhí)行效果依賴(lài)next方法的調(diào)用
注冊(cè)全局的方法：
const? router =new Vuerouter({})
router .beforeeach((to ,from ,next))=>{
}
不寫(xiě)demol心累
總結(jié)：
今晚就總結(jié)到這吧,不喜勿噴黍少，成長(zhǎng)路上在于點(diǎn)滴積累，知識(shí)在于分享处面，路的方向?qū)α顺е茫还芏嗲郏嗥D難都要走下氣魂角，結(jié)繩記事昵济，不負(fù)好時(shí)光----------汪少。
