17-router 路由

1. 路由和路由器

  • 路由是一組對應(yīng)關(guān)系,即一組 key - value的對應(yīng)關(guān)系, 路由器是管理路由的召锈,多個路由由路由器管理。
  • key 為路徑,value 為function或者 component
  • route -- 路由
  • router -- 路由器

1.1 路由的功能

是為了實現(xiàn) SPA(single page application)單頁面應(yīng)用拐袜。相對于多頁面應(yīng)用吉嚣,頁面跳轉(zhuǎn)是通過 實現(xiàn)的,但是單頁面實現(xiàn)內(nèi)容跳轉(zhuǎn)就需要使用路由的功能去管理組件的顯示或者銷毀蹬铺。

1.2 SPA 單頁應(yīng)用的理解

  • 單頁應(yīng)用整個只有一個頁面
  • 點擊頁面的導(dǎo)航鏈接尝哆,頁面不會刷新,頁面只會做局部刷新甜攀;
  • 數(shù)據(jù)需要通過 ajax 請求獲取到

1.3 路由的分類

  • 前端路由
    理解:value 是component秋泄,用于展示頁面的內(nèi)容
    工作過程:當(dāng)瀏覽器的路徑發(fā)生變化的時候,對應(yīng)組件就會顯示

  • 后端路由
    理解:value 是 function规阀,用于處理用戶提交的請求印衔;
    工作過程:服務(wù)器接收到一個請求時,根據(jù)請求路徑找到匹配的函數(shù)來處理請求姥敛,返回響應(yīng)數(shù)據(jù)奸焙。

2. vue-router-基本路由

vue-router 是vue的一個插件,專門用來實現(xiàn)SPA 應(yīng)用的彤敛。
既然是 vue 插件与帆,那么在使用的時候需要先引入,然后再使用·Vue.use()
2.1 安裝 vue-router, 命令 npm i vue-router
2.2 應(yīng)用插件:Vue.use(VueRouter)
2.3 編寫 router 配置項

//在 src 下面創(chuàng)建一個router 文件墨榄,然后再創(chuàng)建一個index.js 文件
//該文件用來創(chuàng)建整個應(yīng)用的路由器
import VueRouter from 'vue-router'

//引入組件
import Home from '../components/Home'
import About from '../components/About'

//創(chuàng)建 vue-router 的實例對象
const router = new VueRouter({
    routes:[
        {
            path: '/home',
            component: Home
        },
        {
            path: '/about',
            component: About
        },
    ]
})

export default router

2.4 實現(xiàn)切換需要使用router-link 標簽

<router-link to="/home">Home</router-link><br>
<router-link to="/about">About</router-link>

2.5 在需要顯示不同組件的地方需要放置一個標簽 router-view

<div>
      <router-view></router-view>
    </div>
//main.js
import Vue from 'vue'
// 引入APP組件玄糟,APP組件是整個項目的父組件
import App from './App.vue'
//引入 vue-router
import VueRouter from 'vue-router'
//引入已經(jīng)配置好的路由器
import router from './router'

//關(guān)閉vue生產(chǎn)提示
Vue.config.productionTip = false
//應(yīng)用插件
Vue.use(VueRouter)


// 創(chuàng)建vue實例對象 -- vm
new Vue({
  render: h => h(App),
  router:router
}).$mount('#app')

3. 幾個注意點

  1. 路由組件通常放在pages 文件夾下面,一般組件放在components文件夾
  2. 通過切換袄秩,隱藏了的路由組件阵翎,默認是被銷毀的。需要的時候再去掛載
  3. 每個組件都有自己的$route屬性之剧,里面存儲著自己的路由信息
  4. 整個應(yīng)用只有一個 router, 可以通過組件的 $router屬性獲取到

4. 嵌套路由(多級路由)

4.1 配置規(guī)則:使用 children 配置項

//該文件用來創(chuàng)建整個應(yīng)用的路由器
import VueRouter from 'vue-router'

//引入組件
import Home from '../components/Home'
import About from '../components/About'
import News from '../components/News'
import Message from '../components/Message'

//創(chuàng)建 vue-router 的實例對象
const router = new VueRouter({
    routes:[
        {
            path: '/home',
            component: Home
        },
        {
            path: '/about',
            component: About,
            children: [ //通過children配置子路由
                {
                    path: "news", //此處不要寫分割線/
                    component: News
                },
                {
                    path: "message", //此處不要寫分割線/
                    component: Message
                },
            ]
        },
    ]
})

export default router

5. 路由的 query 傳參

5.1 傳遞參數(shù)

<!--跳轉(zhuǎn)并攜帶 query 參數(shù)郭卫,to 的字符串寫法-->
<router-link :to="/home/message/details?id=666&title=你好"> 跳轉(zhuǎn) </router-link>
//如果是動態(tài)的拿到 id 和 title 數(shù)據(jù),需要這樣寫
<router-link :to="'/home/message/details?id={m.id}&title={m.title}'"> 跳轉(zhuǎn) </router-link>

<!--跳轉(zhuǎn)并攜帶 query 參數(shù)背稼,to對象寫法-->
<router-link 
  :to = ‘{
    path: '/home/message/details',
    query : {
      id : m.id,
      title :m.title
    }
  }’
  >跳轉(zhuǎn) 
</router-link>

5.2 接收參數(shù)

$route.query.id
$route.query.title
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末贰军,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子蟹肘,更是在濱河造成了極大的恐慌词疼,老刑警劉巖,帶你破解...
    沈念sama閱讀 212,222評論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件帘腹,死亡現(xiàn)場離奇詭異贰盗,居然都是意外死亡,警方通過查閱死者的電腦和手機阳欲,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,455評論 3 385
  • 文/潘曉璐 我一進店門米辐,熙熙樓的掌柜王于貴愁眉苦臉地迎上來书释,“玉大人爆惧,你說我怎么就攤上這事锨能。” “怎么了熄阻?”我有些...
    開封第一講書人閱讀 157,720評論 0 348
  • 文/不壞的土叔 我叫張陵秃殉,是天一觀的道長浸剩。 經(jīng)常有香客問我绢要,道長,這世上最難降的妖魔是什么樱哼? 我笑而不...
    開封第一講書人閱讀 56,568評論 1 284
  • 正文 為了忘掉前任搅幅,我火速辦了婚禮呼胚,結(jié)果婚禮上砸讳,老公的妹妹穿的比我還像新娘。我一直安慰自己簿寂,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 65,696評論 6 386
  • 文/花漫 我一把揭開白布纳令。 她就那樣靜靜地躺著平绩,像睡著了一般。 火紅的嫁衣襯著肌膚如雪跃赚。 梳的紋絲不亂的頭發(fā)上性湿,一...
    開封第一講書人閱讀 49,879評論 1 290
  • 那天叹括,我揣著相機與錄音宵荒,去河邊找鬼。 笑死摔竿,一個胖子當(dāng)著我的面吹牛继低,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播袁翁,決...
    沈念sama閱讀 39,028評論 3 409
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼狐树!你這毒婦竟也來了抑钟?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,773評論 0 268
  • 序言:老撾萬榮一對情侶失蹤幻件,失蹤者是張志新(化名)和其女友劉穎绰沥,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體徽曲,經(jīng)...
    沈念sama閱讀 44,220評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡涧衙,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,550評論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了正勒。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,697評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡祥绞,死狀恐怖蜕径,靈堂內(nèi)的尸體忽然破棺而出败京,到底是詐尸還是另有隱情赡麦,我是刑警寧澤,帶...
    沈念sama閱讀 34,360評論 4 332
  • 正文 年R本政府宣布遂铡,位于F島的核電站扒接,受9級特大地震影響钾怔,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜蒂教,卻給世界環(huán)境...
    茶點故事閱讀 40,002評論 3 315
  • 文/蒙蒙 一凝垛、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧炭分,春花似錦剑肯、人聲如沸让网。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,782評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽泞辐。三九已至咐吼,卻和暖如春商佑,著一層夾襖步出監(jiān)牢的瞬間茶没,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,010評論 1 266
  • 我被黑心中介騙來泰國打工礁叔, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人煮岁。 一個月前我還...
    沈念sama閱讀 46,433評論 2 360
  • 正文 我出身青樓涣易,卻偏偏與公主長得像新症,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子荚醒,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,587評論 2 350

推薦閱讀更多精彩內(nèi)容